TinyBox JavaScript Popup Box – 3.4KB

• http://css9.net iiduce

  Good Job，it’s really very useful to me，thanks a lot. I’ve translated it into chinese in my blog （http://css9.net/javascript-lightweight-modal-window/）, and posted your website as a link as well, hope it could help more people.

• http://stanko.mfhinc.net stanko

  Thanks for sharing, again you write one of the best JS scripts around.
  Just wanted to let you know that

  Cheers,
  S

• Pingback: TinyBox, ventanas emergentes en solo 3.5kb : Blogografia

• http://blog.developpez.com/djo-mos Jawher

  Hi,
  Kudos for this awesome script

  BTW, le download link is broken : there is an extra ” in the end.

  Cheers

• http://temps-pi.blogspot.com stephanea

  Nice javascript. However the demos could have a button to close the box. Is it possible to add one?

• http://kucrut.org kucrut

  Excellent! And yes, a close button could make this even more perfect. Oh, the download link has an extra quote, you might wanna fix it

• http://www.leigeber.com Michael

  @Jawher – The link is fixed, thanks for the heads up.

  @stephanea/kucrut – Sorry I left the close link out of the demo by mistake. You can see it in the first “advanced” popup. If you want to build in a close button to all the popups by default you can add an additional div in the conditional starting at line 9.

• Eduardo

  Another great code. Thanks again!
  Could you just help me please in one thing? How can I hide the black translucid backgrounds that apears in the screen when I click in the pop link? I wanted it to appear like a “simple” pop up.
  Thanks anyway! A thanks again for another great job!

• http://www.leigeber.com Michael

  @Eduardo – Removing the mask somewhat defeats the purpose of this particular script. I have a draggable popup script coming out soon that may fit better. If you need this one to work just remove all the references to the mask (variable m) in the JavaScript.

• http://www.webgyver.com WebGyver

  Awesome work!

  Thanks for taking the time to a) develop this and b) document it as well as you have.

  Just out of curiosity (and I could probably build a demo myself to find out, but if somebody already knows the answer, please let me know):

  Are there any known “side effects” when you use this with the core jQuery script?

  Again, I’m just wondering whether anyone has done any jQuery testing or ran into any issues. And, by the way, I’m fully aware that many other people write JavaScript components, so I’m not worried about possible compatibility issues with this-add-on-JS-script and that-stand-alone-JS-script.

  Be well, do good work, and keep in touch!

• http://www.leigeber.com Michael

  @WebGyver – There are no known compatibility issues and should not be as the script is in it’s own namespace.

• http://pixelube.com Vincent Dean

  Thanks so much for creating and sharing. Is there any chance the this supports flash within the modal window? I’ve tried to use various modal pieces in the past that claim they support flash but have yet to find one that works consistently across IE, FF and Safari.

  Again, thanks soooooo much for creating. It’s snippets like these that really help my web designs shine!

• Eddie Leo

  Amazing. Simply amazing. Thank you.

• http://www.leigeber.com Michael

  @Vincent Dean – I just tested a swf embedded in every browser I have running and had no problems. Keep in mind that AJAX responses do not run any of the JavaScript that you may have otherwise used to embed the Flash file or fix the IE ActiveX mess. A simple object works fine, anything beyond that would need to be coordinated with the TinyBox script.

• http://www.kidsuki.com bootcat

  Hey thats a script i was looking for actually . It will help in providing a message box in my upcoming apps . thanks and keep the good work going.

• Pingback: Lightweight Modal Window Script: TinyBox :: Graficznie

• http://belikewater.ca Mike Mella

  Doesn’t degrade gracefully, eh? When JavaScript is turned off, nothing happens. That’s a shame.

• http://www.leigeber.com Michael

  @Mike Mella – Definitely up for suggestions but I don’t see how it could function, even partially, without JavaScript support. What did you have in mind?

• http://www.openendedadventure.com Cephalopod

  Yeah, I’m definitely going to work on adding that into my site.

• Pingback: TinyBox: Lightweight Modal Popup | amolwable

• Pingback: Lightbox Style Javascript Popup Box « blog.joeldelane.com

• http://sirestudios.com Tommy M

  Absolutely love this! To get a similar effect you’ll need to load almost 80 Kb of prototype and effects.

  However, I am running into a small problem. I have a form I would like to be submitted from one page to the next, all within the your sleek interface. I created a page, when the user clicks on a link, it loads advanced.html (just like your Advanced example), but there is a form instead on advanced.html like so:

  <form action=”ajax.php” method=”post” onsubmit=”return false;”>
  Name: <input type=”text” name=”name” />
  <input value=”Send” onclick=”javascript:TINY.box.fill(‘ajax.php’,1,0,0,1);” type=”button” />
  </form>

  When the user clicks on the Send button, I want their name to be posted to the next page on ajax.php. I can’t seem to get this working. Any ideas?

• http://www.leigeber.com Michael

  @Tommy M – You would need to do the post with JavaScript. You really would not need a form, only an onclick event calling a function that grabs the values from the DOM and posts them. I could write an entire post on it, and may, but hopefully the below will help get you started (assuming you are somewhat familiar with AJAX) in the meantime.

  var url = ajax.php;
  var name= T$(‘input id’).value;
  var post = ‘name=’+name;
  var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(‘Microsoft.XMLHTTP’);
  x.onreadystatechange=function here();
  x.open(‘POST’,url,true);
  x.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
  x.send(p);

• http://belikewater.ca Mike Mella

  Well, when JS is not available, maybe have it just open the content in a new window or something, a-la jQuery.

• Guido

  Great Work!
  Finally i found a modal that works correctly with my software in .NET and Ajax!!

  I’ve only a little problem, i hope that you can help me to solve.

  I call my page in this way:
  TINY.box.show(‘inoltra.aspx?ID=’+sID,1,500,300,1)

  In the page inoltra.aspx i’ve a DropDown that on selectedIndexChanged have to call a Sub, but it doesn’t works.
  I’ve tried the page inoltra.aspx in normal mode, not in modal with tiny, and it works.

  Can you help to solve this problem?
  Tx a lot and very very congratulation for this code!

• http://www.leigeber.com Michael

  @Guido – Send me an email with a link if you have it live. I can read that a couple different ways so I am not sure how to answer.

• http://stanko.mfhinc.net stanko

  Hmm I just was thinking, it would be nice to have it closed on ESC key but anyway I must say again, great work

  Cheers!

• Pingback: Tinybox: javascript Popup | Eliseos.net

• http://blog.developpez.com/djo-mos Jawher

  Hi again,
  a massive +1 for a close button (which can be toggled).

  Cheers

• http://jclaes.blogspot.com Jef Claes

  That looks very smooth! Might be using this in my next project. Thanks!

• Kristan

  I love this code, I hop you can help me.

  I have a form set up on my page. When the user clicks “submit” I want the box to open with the recaptcha in it (the space where I need the recaptcha to be is too small on my form). However, as I’m testing I’ve noticed that when I replaced the advanced.html file with the new file, the recaptcha doesn’t show, but it does show up when I look at that specific file live. Any thoughts?

  i.e.1) pemc.com/firsttimebuyer/tinybox (click advanced features)

  i.e. 2) pemc.com/firsttimebuyer/tinybox/advanced_1.php

  Thanks in advance,
  Kristan

• Stefan

  The tinymask doesn’t cover select boxes in IE6. Any idea how to fix it?

• http://www.looogo-web.com Anwar

  The tinymask doesn’t cover select boxes in IE6. Any idea how to fix it?

  i also face same issue.. any solution? please

• Subramanian S Iyer

  Please update the width and height properties of page to;

  width:function(){return self.innerWidth||document.documentElement.clientWidth<b>||document.body.clientWidth</b>},
  height:function(){return self.innerHeight||document.documentElement.clientHeight<b>||document.body.clientHeight</b>},

• http://www.przyroda.org.pl Sklep Wędkarski

  Can’t believe it’s so light, really good. Anyway I’m would like to it set up as a an “on join pop-up”. Is there a way to modify the script to non-click version?

• Christie

  Hi – Thanks for this great script! I have one problem – the positioning isn’t working for me – the window is the top left of the screen, not in the center. This happens in IE7 and IE6 but not Firefox. Any ideas? Thanks!

• Christie

  Oops, never mind – the suggested edit from Subramanian S Iyer fixed the issue. Thanks for a great script!

• Ryd

  Wow, really awesome script…^o^
  But, i have one problem, can i execute other javascript over tinybox popup?
  well, i have tried to load a page that contain tabbed menu javascript (using jquery)… and i found out that this script can’t work within popup, any idea to solve this problem?

• http://www.leigeber.com Michael

  @HansLukas – You need a web server setup on your machine or a remote server to use Ajax calls.

  @stanko – Thanks for the suggestion, I will definitely put that in the next version.

  @Kristan – JavaScript run in an Ajax page will not run unless you call it from the parent. You would need to wait for the response to complete and then generate the reCaptcha. I may address this in the next version.

  @Stefan/Anwar – There are a few “fixes” out there for the IE6 form element issue, do a Google search. None of them are pretty though.

  @Subramanian S – Thanks for the tip, I will take another look at my functions.

  @Sklep Wędkarski – Not sure what you are asking, you can call the popup from any event.

  @Ryd – Same advice as Kristian above, can be done but not native to Ajax.

• http://scriptshow.wordpress.com ScriptShow

  It’s a great job!. A simple development without heavy libraries, Ajax, .NET, etc…

  I am passionate about the work simple and effective.

  Thanks for sharing.

• http://www.lami.me mrlami

  When using this with tiny table sorter… table sorter breaks.

  Any insight from anyone on why this is happening will be helpful.

• Christie

  I would like to use this script to load our sites Verisign certificate as a popup. Is it possible for this to work with a URL? I tried putting a URL as ‘content’ but that didn’t work…next I created an HTML file with:
  <meta HTTP-EQUIV=”REFRESH” content=”0; url=https://seal.verisign.com/splash?form_file=fdf/splash.fdf&dn=WWW.mysite.COM&lang=EN”>
  but that didn’t work either. Is it possible? Thx!

• http://www.przyroda.org.pl Sklep Wędkarski

  @Michael can you tell me how to do it with onLoad event? It’s seems I can’t do it…

• http://kiwisbid.co.nz MR

  Sweet as!

  Looks good, I think we are going to implement that on our blog:

  http://blog.kiwisbid.co.nz

  Btw do you have any suggestions what else to use on this kind of website? If you do have any please hit me up on contact (at) kiwisbid.co.nz

  Cheers!
  M.

• http://www.welovewp.com Matt Findley

  Whoo…sweet! I’m glad I came across this little nugget of gold. I’m in the middle of a heavy dev for a client and I think this baby is the solution to the problem I’ve been having. I love using javascript! I’ll let you guys know how it goes and maybe even post a link once I’m done. Back to work

• Pingback: Azeem Azeez | Blogs | CSS and Javascript articles roundup

• http://www.yoxim.com YOXIM

  Hey, how’s it going? This seems like a really nice feature, but I just cant’ get it to work. The page where I’m trying to make this work is http://www.yoxim.com/services.php, where it says “open a new window”. I linked it to a test url just to make sure it works, but for some reason it seems broken.

  I plan on using this to display a contact form. It seemed like a perfect non-intrusive solution for what I need. Any help would be greatly appreciated. My email is info@yoxim.com. Thanks!

• http://www.webdev3000.com Csaba

  Exciting ! Another perfect script from perfect coders. Keep your work guys

• Tony

  Wonderful script…question though…can I use this with multiple javascript buttons you provided. The one rollover button works and I get the overlay and the the photo comes up but when I clip a different button the script doesn’t work. What am I doing wrong. Great script though…works for one on a page but not multiple rollovers? HELP!

• Sean

  This is great! All I wanted was something that made nice popups, and was SMALL – glad to see it exists!

  To Mike Mella, if you’d like it to degrade gracefully, I believe you can just use an anchor tag (rather than a div, per the examples) as the “click me” element, set the href to where the content is, set the target to be blank if you’d like a new window/tab, and add “return false;” to the end of the onclick funciton.

• Randolf

  so this script is called TinyBox! great script man. been wondering to use this instead of a pop-up!

• Pingback: Lightweight Modal Window Script: TinyBox | rapid-DEV.net

• http://heavensart.com Willem

  Can you give me a script that the popup automatically loads when the webpage loads and then automatically disappears after 3 seconds. I changed the onclick to onload, but that did not work

• http://www.marsdenfamily.us Adam

  This is absolutely amazing and thank you for all of your hard work. Is it possible to create an instance without an onclick event?

• http://www.myweddinglist.com.au Josh

  DAMMIT!
  You did ti again!
  How do you do this amazing scripts!!!!!
  My hat 2 u!

• http://www.urbanacremedia.com Kevin

  Michael,

  How would I call Tinybox from Flash AS2?

  Thanks so much.

  Kevin

• Witblitz

  Awesome! Now we need it in a PHP modular format to read images from a folder.

• oleinv

  Thank you very much for the script, it is amazing! It would be cool to have a close button and the display content when javascript is turned off. Also, html does not pass validation because of the img in javascript. Unfortunately I do not know javascript, to do this, so I will wait for the next version.

• Kevin Major

  I ran into a bug. I was helping someone on a PHP/JavaScript forum. They wanted a tinybox to appear immediately upon page load. So, I did something like:

  window.onload = function(){ TINY.box.show('somecontent.html', 0, 350, 350, 1, 2); }

  Here's what happened – using FF 3+ (haven't tested it in other browsers yet), it would merely append the filename of the content to the end of the document. No box, no content, just the filename appended to the end, which would disappear after two seconds due to the time argument I passed in. Any ideas?

• http://www.benoitvilliere.com Benoit

  Thanks for this great script that works on all browsers!

  For those who would like to use it with jQuery, you can do it this way :
  $(function(){
  $('#button').click(function() {
  TINY.box.show($('#hidden-stuff-to-show').html(),0,0,0,1);
  });
  });

  Awesomeness.

• Jason of Melbourne

  Hi, I'm sorry, I'm pretty new to javascript.

  Can I have plain text as the event handler to trigger my popup box?

  Basically, I want it to work like a hyperlink – click the text, the window opens.

  I'm thinking this should be really simple, but I've been trawling the net for hours and can't make anything work. Thanks!

• http://www.ezduzit.ca ezduzit

  Amazing little piece of code!

  I have a small (fixable?) issue, though. The buttons i'm using to call up the TinyBox are only reached once you scroll down the page a bit, but once you click a button and the TinyBox opens, it automatically jumps back to the top of the page!? Is there a way to get the TinyBox to popup where I am on the page, instead of closer to the top?

  Thanks again for a real treasure.
  ez

• http://www.ezduzit.ca ezduzit

  Is there way to have the popup appear near the bottom of the page, instead of always jumping to the top? The buttons i'm using to call up the popup are only reached by scrolling down a few times?
  thanks!
  ez

• cfaniak

  Hi,
  is there a possibility to turn off fade in/out and resize of the box at begining? because when a page has a lot of graphic its very slowly to open this box

• PJ

  hi, is ther a way it will appear beside the mouse pointer? like positioning..
  thanks

• Pingback: X-Find---> Flash, Php, Css, Xml: tutto FREE!

• Nuel

  Hi, thanks for his great work

  I downloaded the script.. the image example works but the external source examples does not work..eg the one with the advance.html does not work..

  I dont know what to do..

• Alterin

  Hi, the script is great. I started using it and I had to make a few changes.

  I have added a fix for the "select" boxes showing over the popup in IE (using IFrame) and another fix for the box showing before the content is shown and thus causing problems in some cases (in my case with a script for PNG transparency fix that runs on window.onload in the IFRAME content in the box).

  I also had to change the "animation" values for the alpha function for showing and hiding and box and mask because the script really seams slow sometimes. It would be good to have some comments besides the script so the users could easily find which values they have to change exactly.

  Also it would be good to mention that the script should not be called before the page is fully loaded because the script is causing problems in IE then (at least in my case with using IFrame for content). This could be fixed either calling the script on window.onload or calling it with a small delay with window.setTimeout. The first solution is better but in my case the second was easier and more appropriate.

  If you are interested in my changes to the script let me know and I'll send it. I have tested the changes only FF and IE and not all ways of using the script but it works great for me.

• Alterin

  PJ, You may be looking for JS tooltips. Here's what I have used (I have used an older version and I haven't tried the latest one): http://www.walterzorn.com/tooltip/tooltip_e.htm

• DT

  Thx for the great work.

  I'm trying to change the final opacity, and was looking for code to do that. I was hoping to find something like:
  style="opacity:0.4;filter:alpha(opacity=40)"
  but found this line:
  e.style.opacity=0; e.style.filter='alpha(opacity=0)';
  That would seem to set the opacity at fully transparent, so I guess I need help finding how to set the final opacity value.

  Anyone? Alterin – seems like you made a change here for the animation can you help/post related code or your comments?

• Alterin

  DT, you can change the final opacity of the mask changing this code in the show function: 'this.alpha(m,1,80,3);'. 80 is the value for the mask final opacity at the moment. 3 is the number of steps for the animation. The opacity of the box is set in the twalpha function on this line 'e==m?this.alpha(p,1,100,5):TINY.box.fill(ic,iu,iw,ih,ia)'. 100 – full opacity of the box, 5 – the number of steps. So when the mask is ready, the box starts showing. After the box is ready (it has reached the final opacity value), fill is called.

• TomVamos

  Hi there,
  Loving the TinyBox but I'm having a spot of trouble.
  Is it possible, on submission of a form in TinyBox, for the next page to stay within the pop-up? Clicking 'Submit' takes me to the parent page everytime.

  Thanks …

  Tom

• http://www.fusemedia.co.nz graphicfood

  @cfaniak try changing the hide function – change this line TINY.box.alpha(p,-1,0,3)
  to this:
  TINY.box.alpha(p,-1,0,1)
  Someone correct me if I'm wrong but the s var in the alpha function is the number of steps?
  That will change the fade out.

  to change the fade in:
  change
  e==p?TINY.box.alpha(m,-1,0,2):b.innerHTML=p.style.backgroundImage=''
  to
  e==p?TINY.box.alpha(m,-1,0,1):b.innerHTML=p.style.backgroundImage=''

  and

  e==m?this.alpha(p,1,100,5):TINY.box.fill(ic,iu,iw,ih,ia)
  to
  e==m?this.alpha(p,1,100,1):TINY.box.fill(ic,iu,iw,ih,ia)

  (first one sets the fade in for the window, second one sets the fade in for the backdrop)

  @MICHAEL: Great work, thanks for this script. Has saved me endless headaches with bloated multi functional generic scripts. Big ups!!

• Alterin

  DT, the show function: line: 'this.alpha(m,1,80,3)'. 80 is the opacity of the mask and 3 is the steps for the animation. twalpha function: line 'e==m?this.alpha(p,1,100,5):TINY.box.fill(ic,iu,iw,ih,ia)', 100 is the opacity of the box, 5 is the steps. So after the mask is ready, the box starts showing.

• Alterin

  TomVamos, Use IFrame as content with src the page you currently load with AJAX in the popup. Example:
  function popupOpen(popupUrl, popupWidth, popupHeight)
  {
  var content = '<iframe id="frameTiny" src="' + popupUrl + '" width="100%" height="100%" scrolling="yes" frameborder="no" marginwidth="0" marginheight="0"></iframe>';
  TINY.box.show(content, 0, popupWidth, popupHeight, 0);
  }

• http://www.danielfernandes.me Dan Fernandes

  Hi. Great script, really nice and compact… but I am having trouble using it with IE 8. The background colour is always a solid black. Is there a fix for this?

• Pingback: Top 7 Modal Dialog Boxes Using Javascript (Comparison)

• Nico – Argentina

  For comments near 31 May 2009, regarding Javascript execution after the Ajax load, I modified the "psh" function in the first "else" after

  b.innerHTML=c;

  I added:

  var x = b.getElementsByTagName("script");
  for(var i=0;i<x.length;i++)
  {
  eval(x[i].text);
  }

  Great job Michael

• Nico – Argentina

  Here I submit a fix for this problem: when the tinybox has more height than the current page height, and it is loaded so as the page has to grow, then you get only a part of the screen with the black mask, the other part is just white.

  This can be solved by changing line 71 from:

  m.style.height=TINY.page.theight()+'px';
  to:
  m.style.height=TINY.page.theight()+TINY.page.top()+'px';

  Cheers

• ovv

  Hi. Just wanted to thank you for nice scripts and point out a problem.

  If you want to use both TinyTable and TinyBox (like we do), it can't be done by just including the .js files as normal. You have to
  modify the file which is loaded later to remove the first two "items" (the TINY-var and the T$ function) or copy the parts after that to the end of the other file and just use one file.

  Hope this might help anyone who gets puzzled why it doesn't work straight out, since it took a few moments before we realized what the problem was.

  (Also had to submit this comment twice)

• http://stroboskope.com Stroboskope

  Another great code. A thanks again for another good job!

• Marshal

  First of all, I must say that this is a gem of a script. Thanks for the wonderful work!! I just wanted to ask if you could assist. I am having issues integrating with Google Maps, as a popup. I think the js is conflicting. is there a work around with this?

• http://box.net boxer

  i also experience the sam, it doesnt work when tinybox is loading external html which contains javascript (i.e datepicker). any suggestions?

• Djrikyx

  Hi, very nice Javascript!

  I have only one problem.
  I want use the popup box same at a iframe. I have included a php file that contain forms and link.. i've tested but when click the link or button, page reloads.

  I want when i click links and buttons, the next page show in the popup without reload the page.
  How i do that?

• http://www.cssproperty.com Atul

  popup window should be in center when we scroll page. Is it possible ?

• waqas ahmad

  very good js script trick for making files work that contain javascript is to use iframe.in tiny box show method open a file a that contain iframe or set its contents as iframe that linked to your required asp or php file and set iframe no border ,with no scroll bar.enjoy working with it

  thanks
  Waqas

• http://www.easypagez.com Ralph

  Great script – Thanks

  @alterin
  I would be interested in all the fixes that you made.

• http://ifailhard.com Pedrum

  when i try it on internet explorer, it just shows up on the left side. in firefox it works perfectly.

• http://www.andrealarosa.com Andrea

  Very Very good…. 4kb !!!!! you are my guru….
  it's possible make a version with iframe box ???
  or can you help me ??

  Thanks

• lofty

  great script – need some advice though..
  I have the same issue Tommy has with wanting to pass information from one tinybox to another – I don't want to send the data back to the server until I have completed a series of screens.
  I have managed to record data in javascript variables and then inject them into the next screen when it arrives. for example..
  funciton Next(){
  TR = getRadio('rad');
  TINY.box.fill("<div id=res></div>",0,0,0,1);
  T$('res').innerHTML = TR;
  }
  but when getting to a reasonable amount of data this becomes a bit scary – I was hoping someone cleverer than me would come up with something more elegant.
  cheers

• http://www.die3sten.com Gilles Mang

  This script is just awesome!!!

  I have a little question though. I have no clue about Javascript. But what I want to do is put a Header & Footer into my box, which would look like this:

  <div class="theader"><img src="images/header.png" alt=""></div>

  [ then the normal box content ]

  <div class="tfooder"><img src="images/footer.png" alt=""></div>

  Can anyone tell what I need to change/add? Thanks a lot in advance!

• http://www.beyondmart.com Atul

  Hi ! i am webdeveloper of <a href=http://www.beyondmart.com>www.beyondmart.com</a>. I have founded solutions regarding to show popup window in center of page evenif you will scroll page. You need following changes in css and javascript
  (1) css :
  replace #tinybox with

  #tinybox {position:absolute; display:none; padding:10px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000; vertical-align:middle;}
  (2) Javascript :
  In line number 14 you just add
  window.onresize=TINY.box.resize;
  window.onscroll=TINY.box.resize;

• Sam

  Echoing Kevin here:

  Michael,
  How would I call Tinybox from Flash AS2?
  Thanks so much.

  I'm trying to use geturl to call tinybox…any ideas?

• Vinayak Khatavkar

  Is there any licence / copyright for redistributing this script.

• http://xunlay.com Diego

  How could I automatically use TinyBox for evey image with "tinybox" class?
  I guess jQuery solves this, but I don't know how.

• http://www.andrealarosa.com Andrea

  Contribution to tinybox iframe
  fill in: function
  replase with

  switch(u){
  case 0:
  this.psh(c,w,h,a)
  break;
  case 1:
  p.style.backgroundImage='';
  var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
  x.onreadystatechange=function(){
  if(x.readyState==4&&x.status==200){TINY.box.psh(x.responseText,w,h,a)}
  };
  x.open('GET',c,1); x.send(null)
  break;
  case 2:
  ifr='<iframe src="'+c+'" width="100%" height="100%" frameborder="0"><p>Your browser does not support iframes.</p></iframe>';
  this.psh(ifr,w,h,a)
  break;
  }

  U = 0 -> normal text
  U = 1 -> ajax
  U = 0 -> iframe

  perhaps not a much but it works

  sorry my English

  thanks Michal
  thanks All

• Zac

  Is there an easy way to fire off an event when TinyBox is finished resizing?

• Jim

  When I put TinyBox and TinySlideShow on the same web page, TinyBox stops working.

• Gavin

  This is a really good tool and I'm implementing it in our company app.
  I'm running into a problem though -

  1) I open the tiny box (via AJAX by passing a url) whenever a particular link is clicked.
  2) The new page is displayed with all the HTML elements including javascripts.
  3) However, when I click on 'save' in the tiny box, the javascript in the tiny box is not executed.

  Resolutions -

  1) I tried Nico from Argentina's solution about evaluating the script tags. But when I click on 'save' now, it still does not call the javascript function in the tiny box. It is able to call any javascript function in the main parent window.

  Basically, I need a popup to display some fields that can be changed, and when the user hits save after changing a value, the value is sent to a javascript function which invokes a JSP url.

  However, i can't get this to work, and I'm nearing abandoning the tiny box code . Any help is much appreciated.

  Thanks

• chezzy

  Great works! However i am having 1 problem here. When I put a form in this TinyBox, the form is not working. But it does work when i open it in a new window. Any idea?

• http://www.dougware.net DougWare

  Question:

  I'm trying to use TinyBox so that when it displays, it's form fields are populated with data from the background page. When it's closed, the data from TinyBox's form fields are saved to the background form fields.

  Here is a rough example of my method, but it's not working:
  —-Load TinyBox Function—-
  loadTinyBox() {
  *CREATE SOME HTML FIELDS*
  ShowTinyBoxFunction
  getDocumentElementByID("SomeElementOnTinyBox") = getDocumentElementByID("SomeHiddenElement");

  —-Close TinyBox Function—-
  closeTinyBox() {
  getDocumentElementByID("SomeHiddenElement") = getDocumentElementByID("SomeElementOnTinyBox");
  HideTinyBoxFunction

  For some reason, I always get a "getDocumentElementByID("SomeElementOnTinyBox")" is null javascript error (I assume the elements are not finished drawing yet before the script tries to populate the data?). All of the relevant javascript is in the background page, as it should be. How can I populate the data fields in tinybox? Does anyone have a work around?

  Thanks for a wonderful project!

• Gavin

  I figured out my problem. I was not setting the correct 'id' for the HTML element. It had nothing to do with TinyBox. Thanks for this lovely tool Michael!

  Chezzy, when you load a form into the TINYBOX, you will need to have a javascript function in your calling page that will read the DOM and pick up the elements from you form and submit it.

  I have implemented the same using the AJAX framework – prototype.

• Gavin

  Dougware, I had a similar problem too. Try setting an explicit 'id' attribute to the <i>SomeHiddenElement</i> HTML element on your page.

• Pingback: Links and Links… : ArenaGeek

• http://www.dougware.net DougWare

  No luck, I was setting an explicit ID. Here's an example:

  function editDemographics() {
  html = '<div id="CloseButton">';
  html = html + '<img src="/images/close.jpg" style="border: 0px none black" onclick="javascript:TINY.box.hide();">';
  html = html + '</div>';
  html = html + '<div style="width: 400px; text-align: center;">';
  html = html + '<strong>Patient Demographics</strong>';
  html = html + '<div style="width: 150px; text-align: right;">';
  html = html + 'Street address:'
  html = html + '</div>';
  html = html + '<div style="width: 250px; text-align: left;">';
  html = html + '<input type="text" id="PopUpAddress" name="PopUpAddress" style="width: 100%;">'
  html = html + '</div>';
  html = html + '</div>';
  TINY.box.show(html,0,0,0,1);
  document.getElementById("PopUpAddress").value = document.getElementById("StreetAddress").value;
  }

  Error: document.getElementById("PopUpAddress") is null
  Source File: /javascript/loadFunctions.js
  Line: 739

• kx

  It doesn't work properly in IE – it shows up on the left side of the screen, with horizontal and vertical scroll bars.

  Any solutions?

• tamer

  hi very nice javascript but i want the visitors can`t back after he click the button if the pop appear , if the visitor click out of the pop he come back i want to can`t do that
  how can i do that

• nsms007

  great script man.. really aprreciate it… thank you so much…

• Minghui

  Very nice script, slim and good enough.

  But when I try to apply it on an image map, it seems it is not an easy job. I have an image map and I want to popup a box depending on which area a user clicks.

• Minghui

  Ooops!

  The advanced feature does not work for me for somehow. It just shows the popup but no content (of advanced.html) is displayed and the popup hides after 3 seconds. I download & run, change nothing.

• Minghui

  Re my previous comment:

  It turns out it is because of my computer's local security setting.

• Chad

  This is such a resourceful site! Many thanks for throwing such helpful codes up!

  Question: in reference to the image pop-up, how do I throw a Flash object in there? I tried and tried again, but it doesn't like the code I am applying in place of the <img src='images/rhino.jpg' width='298' height='373' alt='' /> on line 26.

  Any suggestions?

• Matt

  Freaking awesome. Works with no problem in no time, easy to implement and call.

  10 out of 5 stars

• lacda

  tinybox is slow effect in IE8.but FF 3.x is verry good.
  Are you fix ?

• nlstart

  I just noticed one short-coming feature in the demo: when clicking on static text there was no way (in FF) to escape the TinyBox. Pressing the 'Esc' button should always leave the TinyBox mode, in my humble opinion.
  Thanks again for this great script!

• Lode

  I've noticed that TinyBox doesn't work in Internet Explorer when TinyMCE is implemented on the page that triggers the TinyBox-popup. Does anyone have an idea how to solve this?

• Paul

  Forget it I put it on Line 26 of your code changing your " to single ' and it works. Great

• http://www.harwood-intl.com Bob Leffew

  I want to use Tiny Box within an asp page.

  It wants to put the box up at the top left of the page. Only the right half of the box in the page.

  Will it work in ASP Classic .asp page?

• Stephen

  I wanted to use a CSS-styled div element to submit a form, but I wanted to display the results in a TinyBox. So, I modified the fill function as follows… you just need to make sure that the form to submit has the ID 'tinyform' and then set the onClick of the div element to trigger the TinyBox which will POST the form contents to the AJAX URL for you.

  Hope this helps someone else! Thanks Michael for the fantastic code!

  fill:function(c,u,w,h,a){
  if(u){
  p.style.backgroundImage='';
  var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
  x.onreadystatechange=function(){
  if(x.readyState==4){TINY.box.psh(x.responseText,w,h,a)}
  };
  af=T$('tinyform');
  if(af){
  x.open('POST',c,1);
  x.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  x.send(getRequestBody(af))
  }else{
  x.open('GET',c,1); x.send(null)
  }
  }else{
  this.psh(c,w,h,a)
  }
  },

• Luke

  Love the script would love it even more with a close button. I know it's free, etc but if you every update it a close button is a must

• Sanjeevinathan

  This really is nice, simple and compact and efficient script.

  it works for me fine for IE7 and FF3. but not IE6. The tiny box is displaying under the Form control(Dropdown and Textbox).

  Does anybody has modified version works for IE6 and Display the tinybox above the Form controls(Dropdown and textbox).
  Thanks in advance
  Sanjeev

• http://ww.gemgfx.com GemGfx

  I want to commend you sincerely on the work you did with the slideshow in particular. I think it's brilliant. I'm planning to use it to replace the portfolio section on my website. I'm also going to look for a way to incorporate this image popup with the slideshow. So when you click on an image it comes up, and darkens the screen and what not. Thanks again for making this available. Keep up the excellent work.

• Moe M

  Hi
  once i try to close the tiny box using parent.TINY.box.hide();
  I am getting a JS error " Permission Denied" any idea why im getting this or how to solve it?
  thanks

• http://scriptshow.wordpress.com ScriptShow

  Greetings, is an excellent work.

  An example with only CSS, no JavaScript:

  <html>
  <head>
  <style type="text/css">
  body {
  background:#EFEFEF url('bg') fixed;
  }

  #fixelem {
  position:fixed;
  _position:absolute;
  _width:expression(eval(document.body.clientWidth)+0+'px');
  _height:expression(eval(document.body.clientHeight)+0+'px');
  _top:expression(eval(document.body.scrollTop)+0+'px');
  top:0;
  left:0;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:#707070;
  overflow:hidden;
  filter:alpha(opacity=70);-khtml-opacity:0.70;-moz-opacity:0.70;opacity:0.70;
  }
  </style>
  </head>
  <body>
  <span id="fixelem" onclick="this.style.display='none'"><center><h2>Este texto siempre estará en la parte superior de la página</h2><br><img src="img.gif" width="200" height="200"></center></span>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  <p>Scroll …</p>
  </body>
  </html>

  The layer is fixed in the foreground, without damaging the scrollbars.

  (Expressions) and (background fixed) are to correct errors in IE 5x, 6x, etc.

  New browsers do not have this problem with the scrollbars.

• Lode

  Is it possible that TinyBox doesn't work when Mootools is loaded in the same page? I only get the problem with IE.. Help please!

• http://bleucube.com Bleucube

  I added the link: <a href="javascript:TINY.box.fill('join.html',1,0,0,1)">Join</a> when I click it I get a javascript error stating p.style is null or not an object on line 41 character 6.

  Am I doing something wrong?

• nerdgirl

  To display the box over flash objects, you must add the wmode attribute to your flash objects like this:
  For <object>:
  <param name="wmode" value="transparent">
  For <embed>:
  <embed wmode="transparent">

  To make the box fixed (it stays in place while user is scrolling), set position to fixed for the #tinybox element in the stylesheet.

  I also added a parameter (mo) to the 'show' function to have the choice of a modal box:
  line 8: show:function(c,u,w,h,a,t,mo){
  line 14: if (mo == 0) m.onclick=TINY.box.hide;

  Thank you for a great tool

• NItish Kumar

  ASP .Net C# event no firing up on tiny box..

  please help me how to do it
  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

  <html xmlns="http://www.w3.org/1999/xhtml&quot; >
  <head runat="server">
  <title>Untitled Page</title>
  <link rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="tinybox.js" language="javascript"></script>
  </head>
  <body>
  <form id="form1" runat="server">
  <div>
  <br />
  <br />
  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><asp:TextBox ID="TextBox1"
  runat="server"></asp:TextBox>
  <asp:LinkButton ID="LinkButton3" runat="server" OnClick="LinkButton3_Click" >Display</asp:LinkButton>
  <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="javascript:TINY.box.hide()">Close</asp:LinkButton>
  <asp:LinkButton ID="LinkButton2" runat="server" OnClientClick="javascript:TINY.box.size('tinybox',200,175,4)">Expand</asp:LinkButton>
  </div>
  </form>
  </body>
  </html>

  using System;
  using System.Data;
  using System.Configuration;
  using System.Collections;
  using System.Web;
  using System.Web.Security;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using System.Web.UI.WebControls.WebParts;
  using System.Web.UI.HtmlControls;

  public partial class Default2 : System.Web.UI.Page
  {
  protected void Page_Load(object sender, EventArgs e)
  {

  }
  protected void LinkButton3_Click(object sender, EventArgs e)
  {
  Label1.Text = TextBox1.Text;
  }
  }

• http://www.SequesteredNews.com Jeff

  Has anyone one here tried to get Mono Slideshow to load in the TinyBox popup?

  I've been playing with it for hours but cannot get it to work. Mono Slideshow uses JavaScript to load the SWF file and I cannot figure out how to pass the JavaScript.

  I am using the TinyBox advanced/ajax sample to load the external HTML/JavaScript from the Mono Slideshow file.

  Index page:
  …
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  <html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>TinyBox – JavaScript Popup Script</title>
  <link rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="tinybox.js"></script>
  </head>
  <body>
  <div id="testdiv">
  <div class="button" id="testclick1"><strong>Advanced Features</strong> – <em>click here</em></div></div>

  <script type="text/javascript">
  T$('testclick1').onclick = function(){TINY.box.show('folder/ajax.html',1,0,0,1)}
  </script>

  </body>
  </html>
  …

  Ajax page:
  …
  <p>You can even <a href="javascript:TINY.box.hide()">close it</a>.</p>
  <script type="text/javascript" src="http://www.mysite.com/folder/swfobject.js?v=2.2"></script&gt;
  <script type="text/javascript" src="http://www.mysite.com/folder/params.js"></script&gt;

  <div id="flashContent">
  <p>Please <a href="http://get.adobe.com/flashplayer/">install Flash®</a> and turn on Javascript.</p>
  </div>
  <p>If you encounter any errors loading Monoslideshow locally, please update your <a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html">security settings</a> by adding the Monoslideshow folder to the trusted locations.</p>
  …

  What's supposed to happen, is the JavaScript from Mono Slideshow places the SWF in the "flashContent" DIV above.

  Anyone have any ideas?

• http://www.SequesteredNews.com Jeff

  Has anyone tried to use TinyBox has a popup for Mono Slideshow or embed a SWF file in the advanced sample?

  I have been working on it for hours but cannot get it to work.

  if anyone has successfully embeded a SWF, please tell me how you did it.

• Quen

  Awesome script great work! however I am having a slight problem in Firefox when you click on a link to birng up one of the popups its quick to load however in IE 8 its slow and laggy. Anyone else experiencing this?

• http://0gate.com 0gate.com

  thanks Mr Michael for this article
  http://0gate.com – زيرو جيت

• http://www.saintthomaselson.org.uk/143/ Fr. Simon

  On one of my pages ( http://www.saintthomaselson.org.uk/143/ )the download link works fine in Firefox and Safari but in IE8 is not centering the box (and is putting at the far left, almost off screen).

  Am I missing something?

• Ash

  Ok great script, but i have a problem with transitions being slow in ff when there is flash on screen.

  I have made the mask/boxresize transitions a little quicker which makes things a little more bearable, but…

  I want to be able to change the starting size of the tinybox to be bigger so it has less to resize when it appears.

  I have spent a while trying to find where the beginning of the ease animation on the resize is but i'm not so hot with js so i cant figure it out.

  The final size of the box will be about 600×400, so i'd like it to appear at about 400×300 instead of the tiny square it does currently.

  Any help would be greatly appreciated thanks :0)

• oscar

  This script works perfectly in IE 8 (centered) if you chage this lines in tinybox.js:

  width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth},
  height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},

  Michael, chage the download files, please. Congratulations and thank you.

• Tyler Blair

  This is awesome and just what I needed! Thank you :3

• http://www.snicktech.com snick

  small set of snippets nice piece of work!

• http://www.tothinkishuman.com Tom

  Hey, Jeff from Sept. 17 — I wanted to play a video using a javascript player, and I ran into the same problem. Following the example, make advanced.html call a iframe, which calls another page as its content. This runs my video script just fine — hopefully it will work for you too.

• Pingback: TinyBox JavaScript Popup Box – 3.5KB « Web Development

• Adam

  Hi, I keep receiving this error please help
  Webpage error details

  Message: Expected '{'
  Line: 287
  Char: 2
  Code: 0
  URI: http://localhost/Baytalm/manage_project.php?act=pro_add

  Could you please help

• Kaozen

  For the closing button:

  Just create a link or a div

  <div id="close" onclick="javascript:TINY.box.hide()">Close</div>

  Works perfectly for me.

  Thanks for the script

• digitalbart

  The popup function does not load in IE? Does anyone know a fix for this?

  function popupOpen(popupUrl, popupWidth, popupHeight)
  {
  var content = '<iframe id="frameTiny" src="' + popupUrl + '" width="xxx" height="xxx" scrolling="no" frameborder="no" marginwidth="0" marginheight="0"></iframe>';
  TINY.box.show(content, 0, popupWidth, popupHeight, 0);
  }

• http://www.theultimatexmasgift.com/index.html Scott

  Great script! Only issue is that in IE and FF the box opens slowly and am wondering if there's a way to speed it up.

  Seems to work fine (speed wise) in Safari.

  If you go to http://www.theultimatexmasgift.com/index.html and click on "Read More" to the right of "Seam" you'll see what I mean.

  I think @Ash (above) was having similar problems.

  Thanks!

  Scott

• Clay

  Hi. This is a great script. Really simple to implement. I was wondering, how can I get it to work with class as well as id. Am i right that currently, the element that calls the modal box needs to have a unique id, but i would like to be able to assign the box to multiple elements without needing each one to be set up separately. Hope this makes sense!
  Any help much appreciated
  Thanks

• Deepak

  Thanks Micheal for this sourcecode.I really saved my time.I had some problems in allignment in IE8 (centering the box).

  I replaced <html> to <html xmlns="http://www.w3.org/1999/xhtml"&gt;

  It Works….!Coool…
  Hope this helps someone…

• glany

  this is one of the best and easiest lightbox window script. Thanks a lot…

• http://www.theultimatexmasgift.com/index2.html Scott

  Any idea what will slow the popup down? I've tried moving all image files over to Amazon S3 and that didn't help. Sorry – not a programmer here. The script works really well, except it's really slow on our site.

  Any help would be appreciated.

  Thanks!

• tvx

  Hi, good job.
  I have got a really BIG problem to find out the place, where the script ends…
  I mean find the place in code, where the new div is fully filled and specially fully rendered in its opacity and size… no way for me to solve id in functions alpha a twalpha.. ???
  I really neeed it for renderig google maps on the popup surface.
  Google maps JS code don't work if it is not run really at the end
  the only place i am able to find is end of fill() but after that there is some zoom a nd alpah…

  could you help me?

• Rupam

  On FF 3.0.15,I am using.Problem is if image size is very small.I am putting like
  var content$k = "<img src='$IMGPATH/".$object['img']."' alt='' /> without any attributes of height,width. The original image comes outside the white box and is not in the center of the white box.Instead its slightly pushed to lower right corner of white box.
  Please let me know how to fix this.
  Regards

• Rupam

  HI,
  Thanx for the wonderful script..however there is one issue in FF 3.0.15, When any iamge is small 28 * 26, and no dimensions are specified (var content$k = "<img src='$IMGPATH/".$object['img']."' alt='' />, then when clicked, the image comes out of the outer white box, lower right shifted,half inside the box and half outside the box.
  BUt when clicked for the second time, then the image comes properly inside the box.
  What isthe so,ution for this?
  Regards

• Hassan

  great script – need some advice though..
  I want to load this tinybox on page load I mean body onload. How can i do it. Please help me

• Lara

  Hi, thanks for the great script.
  Just one question tho… My page is rather long, and I use a scroll bar, so when an item is clicked the popup displays at the top of the page again. Is there any way of displaying the popup at the current scrolled position?
  I would really appreciate any suggestions or advice
  Thanks in advance

• D Gibson

  Very good! A support forum for all these questions may be a better way of handling them )

• Phil

  Hi Michael, Very nice and many thanxs, but….if the tinybox is taller than document body and taller than the browser window, then 1) vertical scrollbars appear which causes the mask width to be too wide (by the width of the v. scrollbar), which in turn causes horizontal scrollbars, and 2) scrolling down, we have an unmasked strip from body end to tinybox end.

• Pingback: TinyBox - a Lightweight and Standalone Modal Window Script

• Pingback: TinyBox – a Lightweight and Standalone Modal Window Script » Shai Perednik.com

• Phil

  First let me say GREAT job on the script!!

  I was wondering if you could add bg opacity options and also different window positioning options not just centered. I've actually modified the jscript myself, but I by no means am a jscript programmer, so I'm sure I've hacked it up… but it does work.

• cliff

  thank you for sharing this wonderful script. i have a table that displays charges and payments for items as links<a>. i would like to use your script when a customer clicks a link, and the tinybox shows the detail information. i'm new to web developing and javascript and need your assistance on how to use your script with the <a href> tag. thanks.

• http://jonraasch.com/blog Jon Raasch

  Hey thanks for this, it's working really well in all browsers for me. To the haters/fancypants talking about graceful degradation if JS is disabled – that's really on you. Call it from a click event for a hard link (<a href="blah" />) where blah is an actual page with the same content.

• Sarah

  Great script, thank you, it is hugely useful! I am having trouble with adding a close button. I see some threads talking about adding it using <div id="close" onclick="javascript:TINY.box.hide()">Close</div> but i am not sure where to put it and how to use this code.

  if anyone could help I would be grateful. I am using the tinybox for images only and want a close icon in the top right of every box as a default. Micheal, you mentioned a div starting at line 9……excuse my ignorance but what exactly do i have to put there. I am a total beginner at all this.

  thanks for your help

• Herms

  Sarah, that's right, you need a link or button with that onclick. Mine is currently like this <button onclick="TINY.box.hide()">Close</button>

  if you're loading images or other content from the same page rather than the ajax option, then you'd add it to the content being passed to the function
  eg. TINY.box.show('<img src="rhino.jpg" alt="rhino" /><button onclick="TINY.box.hide()">Close</button>',0,300,150,1,3);

  I think that's correct anyway, I tried it and it worked ok. But i'm using this for the ajax method and placing the button in the html of my external page.

  Now my question… Is it possible to disable the black overlay background fading in and out? because it slows down my site ALOT on my netbook in ie8. (its fast in firefox, and tolerable in chrome and safari) but I don't need a black overlay anyway, so i'd rather not have it.

  Cheers, Herms

• Herms

  please dis-regard my previous question, Alterin has answered it previously.

  To remove the background-mask fade-in I changed line 36 to: ic=c; iu=u; iw=w; ih=h; ia=a; this.alpha(m,1,0,0);

  Thanks!

• umesh

  I have a problem with tinybox.
  I have a flash ad on my home page when i click tinbox link it works fine but unable to hide
  flash ad.
  Is there any way to hide flash ad

• http://www.srisoftwarez.com Jegan

  hey umesh,

  hide the flash ad by putting it in a div and make it display:none; css property.

• Mit

  Using windows-1251 coding and have trouble with incorrect view when loading .html or .php with TINY. Chrome working fine except IE and Firefox. Seems the problem with sending headers through xmlhttprequest … how can i fix it ?

• Aji

  awesome stuff!!!!

  u saved many lives,,
  and i have a problem..i had a long page..tiny box shows in the middle of my page..i need to scroll down to see the content..
  somebody help to fix this..
  i need the tiny box in top of my page…

• Balaji

  Hai,
  I am using the tinybox for displaying a web page inside IFrame.Everything is working fine.But when i am hiding a tinybox using button onclick event in iframe, it is not hided.The javascript error – 'ai – null or not an object.'Please anybody help me to solve this. Thanks in advance.

• Marc

  Hi there,

  Firstly, may I say what a great script this is. Simple and quick. My only question as I am not an expert in Javascript, is whether we could have the popup box open up to fill x% width and x% height of the user's screen instead of the fixed pixel dimensions?

• mark

  I Love Tinybox–it's a great script– but when testing on IE8, I'm running into a problem: The pop up is supposed to display an image, but the image doesn't show up. (Instead of an image, I'm only getting a blank pop up window, although the pop-up will display text.)

  The image appears in every other browser, and there's no problem viewing the image directly through its URL. It Only seems to have trouble in this browser. Any thoughts?

• Troy

  I see how to use tinybox to load ajax, pictures, and text. But I can't figure out how it get it to load HTML content, like a small form page. Help.

• Kobyn

  Nice job. It is working for me without problems in IE. Is there a way to add a "close" either a word or a pic for closing the box? Escape key doesn't work.

• venu

  how to decorate the tinybox with header and footer, like in header cross image to close it.

  Please help me…………..

• venu

  i think we can add close as text hyperlink and we have to call Tiny.box.hide() method to close it, but i want it in some good decorative way like for any general window we have close button on top left.

• Neha

  Hi, script is working fine but I am using the header in flash and that flash header is coming on the top and the mask below it.
  Please let me know how to sort this out…as the black mask is not able to overlay he flash.

  Thanks!!

• Akiro kurosova

  great script..
  but how to make it on top the screen plz reply.
  im an idiot when it comes to javascript..
  i saw people asking that question many tymes.
  but never got any reply.

• http://www.sdesalas.com Steven de Salas

  Hey Michael, thats a nifty script you got there.
  I was using it for my site and noticed that there is a bug in IE 6 – see http://www.codeproject.com/KB/HTML/dropdown_div.aspx
  This happens when you have a dropdown on the body of your page, it shows *above* your popup window. So I added an extra function that gets called from inside show() and hide(), here goes… hope you find it useful:
  // Hide Select (fix IE bug where all Select Dropdowns show above the top layer
  hs: function(t) {
  var st = document.getElementsByTagName('select');
  if (st)
  for (var i = 0; i < st.length; i++)
  st.item(i).style.display = (t) ? '' : 'none';
  }

• Mike B.

  I am using tinybox with a 200×200 size, but the inner html file goes past the tinybox border. How do I fix that?

• Stiofan

  Hi Please please can you make a simple close button for this script????

• http://www.silverwolfmedia.com Frank

  For some reason that I'm too stupid to fathom out, the content that I want to display in the TinyBox popup gets appended to the bottom of my parent page instead. Any suggestions?

  * scratches head *

• http://www.samanthacrane.com Samantha Crane

  Firstly, many many thanks to Michael for some fantastic and very useful code. I wanted to share a solution. It may not be elegant but it works and may help someone, or inspire Michael with any future updates.

  My scenario: The user has completed some processes on the page and wants to email a copy of their results for future reference. I wanted to pop-up an 'email this to me form' using tinybox, so the original page and all their work stay in place in case they want to do something further. The user completes some inputs – their email, name etc – in the popped up form and submits it to my php code which does all the processing and refreshes the page with a success or failure message.

  The problem:
  1. The refreshed page broke out into a new window.
  2. Once in an iframe to stop this there was no close button that I could get to work.

  Solution …

  inspired by a couple of earlier comments, in the tinybox.js code I changed the fill function to…

  fill:function(c,u,w,h,a){
  switch(u){
  case 0:
  this.psh(c,w,h,a)
  break;
  case 1:
  p.style.backgroundImage='';
  var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
  x.onreadystatechange=function(){
  if(x.readyState==4&&x.status==200){TINY.box.psh(x.responseText,w,h,a)}
  };
  x.open('GET',c,1); x.send(null)
  break;
  case 2:
  ifr='<a href="#" onclick="TINY.box.hide();"><img src="mypage/images/Skin1/bg/close2.jpg" alt="Close Window" /></a><iframe id="someid" src="'+c+'" width="'+w+'" height="'+h+'" scrolling="no" frameborder="no" marginwidth="0" marginheight="0"><p>Your browser does not support iframes.</p></iframe>';
  this.psh(ifr,w,h,a)
  break;
  }
  },

  and changed the hide function to…

  hide:function(){
  window.parent.document.getElementById('someid').parentNode.removeChild(window.parent.document.getElementById('someid'));
  TINY.box.alpha(p,-1,0,3)
  },

  This allows for my pages to display within an iframe to stop them breaking out, with a close button displayed top right. Did I say top right? ah that needs changes to the css…

  #tinycontent img{border:none;display:inline-block;float:right;text-align:right;padding:0;height:23px} /*Close button */
  #tinycontent iframe{background:#323232;height:590px} /*less height than the tinybox to ensure the iframe is within the border, the background is set to the same color as my page content body */

  The tinybox call is then…[note I have needed to set an appropriate height and width]
  TINY.box.show('myformpage.php', 2, 600, 660, 1);
  // the 2 makes it an iframe, the 600 and 660 are the width and height, the 1 is because I want the user to decide when to close.

  Hope that helps someone.

  Happy tinyboxing!

• onsetrese

  Hello,

  I like Tinybox. But I do have a question, how can I make the ajax call synchronous?

  Regards,
  Harold

• spinner_squad

  hi! how can i create a close button in the popup???

• http://wagia.info/ Wagia

  Hi, I've been using the script for about 3 hours now and I think it's just amazing! Is there a way to minimize the windows? Say your playing music in a pop up box, but when you close it, the music stops.

• Rouslan

  Exactly what I was looking for.
  Me is very very grateful

  Thanks.

• http://www.plugsocket.com/ Andrew

  You can get the ESC key to close the window with the following code..

  function esc_hide(e){
  if (!e) e = window.event;
  if (e.keyCode == "27") TINY.box.hide();
  }

  Then add the following to the show function..

  document.onkeypress = esc_hide;

  Plus the following to the hide function..

  document.onkeypress = '';

• Sheraz

  Hi mate, im using your tinyslider, and have tried to get it to work with thickbox, and spent all day trying to fine a solution, but nothing, the slider wont work in the new window.

  Will tinyslider work with tinybox?

  Many thanks

  Sheraz

• Frank

  Could you add support for DOM object. Cause my project alway generate DOM object, so I modify your tinybox source in order to add DOM object into the "b" not only set the "b"'s innerHTML.

• rodrigo

  esto es exelente.. un aporte exelente de su parte, realmente, ya que es muy facil adaptarlo a otras modalidades.. ya sea para dejar mesajes mandar e.mail secuencias de fotos.. como tu lo dices. el cielo es el limite,… gracias por este aporte

• rodrigo

  me queda una duda.. este codigo es libre??? osea se puede integrar remodelandolo a una pagina? que licencia tiene. muchas gracias por sus respuestas

• Pingback: Poker Genio – Genios del Poker » Clasificación General

• http://iasisevens2.blogspot.com/ campuscodi

  You might want to add your script to this database http://planetozh.com/projects/lightbox-clones/

• locojester

  Love the script it's exactly what I was looking for. Works wonderfully.

  I just have one question… how does this effect SEO? Will it be able to search the contents within the popup? I'm looking to utilized your code to display a small "book".

  Thanks.

• cww2

  Wondering if anyone can guide me in disabling the feature that when you click the mask background, the tinybox closes? I have a particular need to only have this close via a button click.

  Thanks – great, easy, useful script.

• cww2

  Found it – to disable clicking background to close, commented out this line:

  m.onclick=TINY.box.hide; window.onresize=TINY.box.resize; f=1

• Ironwarez

  This Its My Solution For Create a Close Button:

  In The Show Function:

  dt = document.createElement('div');
  dt.id='divtitle';
  dt.style.paddingRight='5px';
  dt.style.position='relative';
  dt.style.textAlign='right';
  dt.style.cursor='pointer';
  dt.onclick=TINY.box.hide;

  st = document.createElement('span');
  st.id='spcerrar';
  st.style.paddingRight='5px';
  st.style.fontWeight='bold';
  st.style.textAlign='right';
  st.style.Align='right';
  st.style.verticalAlign='absmiddle';
  st.innerHTML = 'Cerrar';

  it = document.createElement('img');
  it.src='../images/modal-box/close.gif';
  it.title='cerrar';
  it.alt='cerrar';
  it.onclick=TINY.box.hide;
  it.style.cursor='pointer';
  it.Align='absmiddle';

  dt.appendChild(st);
  dt.appendChild(it);

  document.body.appendChild(m);
  document.body.appendChild(p);
  p.appendChild(dt); // ******* New **********
  p.appendChild(b);

  Its All !!

  Good Lock!

• Ironwarez

  For IE7 and IE8 You Must Remove :
  //st.style.Align='right'; <— Remove
  //st.style.verticalAlign='absmiddle'; <— Remove

• Atle

  There is something really wrong with that height auto function in Tinybox. When I set 0 to get height on auto, all i get is a height:0; in CSS, witch really is not a good thing. Any ideas what I can do to get this one to actually be auto?

  Thanks!

• Ironwarez

  uhmm rare…

  The Form Correct Its Without ' ':
  TINY.box.show(URL,1,0,0,1,0);

  Wrong:
  TINY.box.show(URL,1,'0','0',1,0);

  What Navigator??

  Form me Work fine..

• Giovanni

  Hi,
  I want to use Tiny Box within an asp page but I don't understand how to do it.

  I use this sintax from onclick command but don't work and in the window run indefinitely the loading image.

  <script type="text/javascript">
  function tinybox(){
  TINY.box.show('login.asp?pdf=0',1,700,400,1)
  }
  </script>

  Can anybody help me?
  Thanks

• http://www.andrewgill.com Andrew Gill

  Hi Michael,
  Firstly, thank you for a great script – I have a question about about displaying an external html file…

  When the html file is local it works fine. Example below:
  onload = function(){TINY.box.show('advanced.html',1,300,150,1)};

  However, if I want to call an external html file then it hangs. Example below:
  onload = function(){TINY.box.show('http://www.website.com/advanced.html&#39;,1,300,150,1)};

  I am not sure why? Can you suggest any changes I should make?

  Many thanks.

  Andrew Gill
  Software Developer

• Pingback: In page pop up javascripts or modalbox | wordpressapi.com

• Pingback: Reference blog

• John

  This is an excellent script. I can't believe how lightweight it is. Great job. I think I may have found a bug though. If I'm displaying content with AJAX and turn off animating the window, the modal doesn't display anything.

  For example, if I change the advanced demo from <code>T$('testclick1').onclick = function(){TINY.box.show('advanced.html',1,300,150,1)}</code> to <code>T$('testclick1').onclick = function(){TINY.box.show('advanced.html',1,300,150,0)}</code>, it no longer works.

• John

  Please disregard my previous comment. I realize now, that when using AJAX, you really should let the modal animate. If you don't, you get a crazy jump when the box goes from 100×100 to its new size once the content is loaded.

• Ironwarez

  Fix For Width and Height (No Show The RightBar and Horizontal Bar)
  twsize:function(e,w,wo,wd,h,ho,hd){
  var ow=e.offsetWidth-wo, oh=e.offsetHeight-ho;
  if(ow==w&&oh==h){
  // Fix Width and Height
  e.style.width=Math.ceil(ow+20)+'px';
  e.style.height=Math.ceil(oh+60)+'px';
  clearInterval(e.si); p.style.backgroundImage='none'; b.style.display='block';
  }else{
  if(ow!=w){e.style.width=Math.ceil(ow+((w-ow)*.5))+'px'; }
  if(oh!=h){e.style.height=Math.ceil(oh+((h-oh)*.5))+'px'}
  this.pos()
  }
  }

• Clotho

  Closing Tinybox at IE8 is slow. I modify the code to remove the fading effect, so it can be faster.

  — tinybox.js (version 919)
  +++ tinybox.js (working copy)
  @@ -52,7 +52,7 @@
  }
  },
  hide:function(){
  - TINY.box.alpha(p,-1,0,3)
  + TINY.box.alpha(p,-1,100,3)
  },

• locojester

  Love the script. Amazing.

  However it looks to be locked into unique "IDs". Does anyone have a solution so that it can be used with "classnames"?

  Thanks.

• Rub

  Hi,

  first of all: great script!!

  I made a screen with Tinybox and when the user clicks the submit button in Tinybox, my php code processes the data from the form field. Now i want to add some code that when the processing of my data is done, the tinybox is closed. (iow, not linked to a button)

  I tried with TINY.box.hide but doesn't work.

  Can someone help me?
  Thx in advance!

• Sarah

  Hi, i love this script and use it lots but i have never used it in an iframe before.

  I want to click on an image which is in a small iframe, and i want it to open a large version of that image in a pop up using the tinybox script but i want it to be in a new window infront of the iframe.

  At the moment i have it trying to open in my iframe.
  I am not that technical so would appreciate any explanations in depth please.

  thanks
  Sarah

• Robin

  Love the script however i've noticed that it dosen't work with Characters like Å,Ä & Ö when loading a external html doc with the script.
  using iso-8859-1 on both the html docs'
  Is there a fix for that or is it just something i'll have to live with?

• Ironwarez

  Hi Michael..

  This Script Have Problem With Spanish: ñ, á, é , í, ó, ú…
  I Try With encodeURIComponent and decodeURIComponent But Not Work…

  I Try Modify The Out But Not Work..
  x.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=ISO-8859-1');

  Please.. I Like This Script, and I USe since 2 moths But Now I See That Not Worsk with ñ and tildes…

  Can You Modified and Put a Versión Correct.??

• http://easyrpg.sourceforge.net/ fdelapena

  It does not work fine with IE8 using ajax request. A simple fix for IE8:

  Just add:

  display: table;

  to #tinycontent and just works.

• T

  Awesome work, thanks for the script. Just what I was looking for – something standalone and slim.

• http://www.vapisoft.com Shlomo

  Hi,
  I like it very much (the demo), but I could not make it work.
  I am using an Internet Explorer and when I activate it I see the horizontalScrollbar for 3 seconds, but I don't see the page.
  I am using it like this:
  TINY.box.show('advanced.html',1,300,150,1,3);

• Keir

  Would it be possible to make the results of the click display the content that is loaded within a div on the same page, say rather than masking the screen and displaying in a new box?

• Tommy

  To solve the problem with select form in IE6, I use this solution (I'm not an expert in Javascript, so there's no warranty…). It hides all selection forms when the TinyBox is dispalyed and shows them again, when TinyBox is removing.

  Add this function in TINY.bax function:
  togsel:function(h){
  for(var i = 0; i < document.forms.length; i++) {
  for(var e = 0; e < document.forms[i].length; e++){
  if(document.forms[i].elements[e].tagName == 'SELECT') {
  document.forms[i].elements[e].style.visibility=h;
  }
  }
  }
  },

  and call the function at the end of show function:
  TINY.box.togsel('hidden')

  and at the end of hide function:
  TINY.box.togsel('visible')

  Hope it may help someone.

• Gary

  Absolutely brilliant, just what I was looking for. Unfortunately the Advanced link doesn't work on the download version. I just get a spinning icon.

• Pingback: Web Programming: Javascript TinyBox JavaScript Popup Box – 3.4KB « Let's share and win the challenge of life

• http://ajiprabowo.wordpress.com Aji Prabowo

  just exactly what I need it most. thanks. two thumbs up!!

• riant

  @Mike Mella ： (when JS is not available:) Maybe the follow code can help you:
  ===============
  $('.tinyBox').click(function(){TINY.box.show($(this).attr('href'),1,0,0,1);
  return false;})
  <a href="abox.html" class="tinyBox">when JS is not available, it will open the link direct</a>
  =====================

  of course, you should have a jQuery. _sorry for my terriable English.

• riant

  @Quen （for the slow fade-in-fade-out in IE）, Maybe you can try to change ====

  var n=Math.ceil((o+((a-o)*.5)));

  to

  var n=Math.ceil((o+((a-o)*1)));

• http://gamerzone.ro Alin N.

  Great web application !
  Thank you Michael.

• CookieRevised

  The current source has some errors and inconsistancies:

  1) line 23, 55, etc: the 'steps' parameter isn't used anywhere (anymore).
  2) When the 'animated' parameter is 0 and the 'Ajax' parameter is 1 in the 'show' function, nothing is shown after the external source is loaded. Somebody commented that animation shouldb be enabled when you use Ajax because otherwise you'll have a 'jump' from the 100x100px box to the actual size. But sometimes this is what you want. So imho, when the 'animation' parameter is 0, the box should not animate its size, but directly jump to the proper size after the external source is loaded.

• Pingback: TINYBOX – 一种轻便的独立模式窗口脚本

• Tom

  Hi
  Thanks for this. I tried to load an external page like
  T$('testclick1').onclick = function(){TINY.box.show("www.google.com",0,300,150,1)}
  Won't this work? Or Am I wrong?

  Tom

• Pingback: TinyBox开源项目 - Ajax代码大全 - Java开源项目 - Java免费软件 - Lightbox - TinyBox - 开源网

• João Henriques

  Hi!

  This popup is very cool! I really want to use it on my web site, i just have a little problem because i want it to open from a flash button!

  Can you give me the code to put in the flash button to make your popup work?

  Thanks and good job!

• http://liquidoxygen.ru Denis

  Hm… it didn't work under GNU/Linux / Webkit (Chromium / Midori).
  But it work in Arora(GNU/Linux / Webkit),
  and under Windows / Webkit (Chromium / Safari). Hm…

• nullp0inter

  I tried using a form on the page my tinybox loads, however it closes anytime I hit the submit button. Then I tried setting up an AJAX call, but Im having trouble with that also. Is making AJAX calls and waiting for the response possible in a tinybox?

  Also, how can I load a different page without having to close the tinybox?

• http://nelsonwhitewaterrafting.com/tinybox/ Greg

  Great great great!

  One question. I am (like everyone else trying to put a closing X graphic on it. Have a look at http://nelsonwhitewaterrafting.com/tinybox/ and then click on "Advanced Features"
  You will notice that on FF, Chrome, Safari it looks and works perfectly but on IE 7 or 8 the graphic gets cut off at the extents of the box. Is there any way to fix this?

  I have absolutely positioned the graphic using a div.

  Thanks in advance.

  Greg

• http://nelsonwhitewaterrafting.com/ Greg

  For anyone wanting to add a close button here is the code.

  In the tinybox.js file starting on line 9 replace that if statement with this one:
  <code> if(!f){
  p=document.createElement('div'); p.id='tinybox';
  m=document.createElement('div'); m.id='tinymask';
  b=document.createElement('div'); b.id='tinycontent';
  closer=document.createElement('div'); closer.id='closex';
  document.body.appendChild(m); document.body.appendChild(p); p.appendChild(b); p.appendChild(closer);
  m.onclick=TINY.box.hide; window.onresize=TINY.box.resize; f=1;
  closer.onclick=TINY.box.hide;
  }
  </code>

  Then in your style.css file add this line:
  <code>
  #closex {position:absolute; top:-10px; right:-10px; z-index:5000; background-image:url(images/x.png); background-repeat:no-repeat; width:24px; height:24px; padding:0px; margin:0px;cursor: hand; cursor: pointer;}
  </code>

  Then just make your x.png file (use a transparent background) and put it in the images folder. You are done!

  Greg

• Marc Wms

  Script works great, but one small issue. When I set the height to auto (0), in Firefox, the #tinycontent div isn't pushing the #tinybox containing div down far enough, in essence, the #tinycontent is not affecting the height of the #tinybox, thus causing an overlap. I tried adding the universal "clearfix" class to the #tinybox div in the javascript file (p.class='clearfix';) — no luck. Any ideas how to resolve?

• http://www.fetimo.com Fetimo

  I have a weird bug on my site that only occurs with Opera. I am using Tinybox with the Google Font API and every time I click off of the Tinybox box the font changes to the next option on the list (which looks terrible). Is there something in the Tinybox JS causing this? Other browsers are unaffected. To see for yourself go to fetimo.com and click on 'get a quote' at the bottom of the page.

• fiqar

  this works as expected. thanks for the great work
  I have commented out (m.onclick=TINY.box.hide;) to make the popup modal

• James

  How can a redirecting link be displayed? I get a blank tinybox if my link redirects to something else

• Roberto

  Hi Michael!
  Cool script.
  I'm not such strong with html and javascritp.
  Let say that when loading index page, I want to pop one TinyBox with a great html news that will disappear in 4 seconds to next show the real index page.
  How to do it?
  Thank you for the tip.
  Robert

• Pingback: Body Groove – The Natural Way To Change Your Body | Body Groove

• http://www.gunduzmetal.com hurda

  I think type of site that is useful in sharing information and it is important to shar.Web proliferation of new developments in the field of design and entrepreneurial spirit of people who have very beautiful and pleasing to be professional.<a="http://www.gunduzmetal.com">Hurda</a><br />

• Pingback: Linkdump #28: Scriptu, scriptu, JavaScriptu! « Tomasz Kowalczyk

• Example1

  what

• Example2

  ???

• Pingback: [javascript]간단한popupbox - 생각하는 하루 » 생각하는 하루

• Pingback: Netflow Developments » Blog Archive » Not all Javascript popup boxes are created equal

• http://profiles.google.com/bigexplorer2011 oluwatobby Giwa

  NICE SITE…..

  http://www.findnigerianjob.com

• Atrixdude420

  Any way to make this load an iframe on a specific spot? Thanks in adv!

• DELE GIWA

  i downloaded the zip folder but i dont know how to go about getting the tiny box jscript into my bloggers html..i dont even know what part of the code to put my own html,,any help me with implementation pls

• Anonymous

  Hey Dude Thanks For the Lovely script, that is so light n easy to handle,

  After banging my head on hell lots of popups finally i got the one i was looking for…
  thumbsup.
  I've used it in ma Website just check it
  <a href="http://virus85.info">www.virus85.info</a&gt;

• Anyta55

  Greg, prompt please, how to add a closing button to the dark background rather than the right top corner of the image. 

• Jay Murphy15

  Hey, thanks for the great script! it is really easy to use and works perfectly! 

  I like the site too! Very clean layout!

  http://www.webdeveloperblog.co.uk

• CRR1983

  Great script! But It can't load correctly a googlemap contained in a page loaded by ajax. :s Any suggestion??
  Thanks!!

• Gavin Jones

  Having an issue when using this script to load a resizing flash movie, the box loads up fine but the flash movie doesnt resize.

  This is an only issue in chrome. if i use the iframe on its own  in a page on its own it also works fine.

  I am using php variables to send over the iframe link to resize the flash. any ideas…

• Sunke861

  thanks ,it's very good

• DontBlink

  Can i put a form inside of this?
  I already have one built, i was hoping i could somehow make these work together. 

• Benjamin Lilley

  I'm trying to use this however in IE I have an issue here http://www.qualutions2.com/MOD/index.php?page=auction  

  the modal box shows below the content.  is this a known issue or am I missing something

• http://thebloggers.org GhamsteR

  Great Script! Do you know if I can make it auto-popup when entering the page, without need for a click?

• Timphaldaravid

  hello

• http://www.titanwebsolutions.co.uk Titan Web Solutions

  Is there an option to add a button to close the popup?

  Luke.
  http://www.titanwebsolutions.co.uk

• http://www.bina.com.tr söve

  thank u for posting.

• Rexleop

  Need Help! I want set a timer 5 seconds to load an loading image on a external page then redirect to another external page in the modal window. How to do that?

• Eduardo Ramirez

  I can't make this work for the first button. I get the uploader graphic spinning but nothing ever loads. 

• Federico

  Minimizing (obscuring) the source code doesn't give so much performance improvements.
  Use Strict Mode, instead. It requires only one simple bug fix: there is a for(s in v), which should be for(var s in v). Then, you can add:
  "use strict";
  at the beginning. Will be faster on browser which support Strict Mode, and still work on other browsers.
  I'd like to make TinyBox work on old browsers, but I can't because you don't share the source code. Please, share it and I'll share some improvements.

• Anonymous

  Hi wonderful script Bt Can Anyone Help How to Make it On page Load?

• polish_web

  How Can I open it from jquery? I have:
  $(".fb, .fbplus").click(function(){    TINY.box.show({iframe:'filesbrowser.php?directory=files/images/newsy&target=image&targettwo=imagebig&iframe',boxid:'frameless',width:750,height:450,fixed:false,maskid:'bluemask',maskopacity:40,closejs:function(){closeJS()}});});

  And it doesn't work

• http://www.facebook.com/profile.php?id=100002381552883 George Gurrola

  sweet script, small and clean… just wondering does it support multiple images such as using rel attribute to cycle through more than one file while the modal is open…

• http://www.facebook.com/profile.php?id=100002381552883 George Gurrola

  yeah that's easy 
  $(document).ready(functionname);

  now the function… that's the fun part

  be creative

• Satish

  How to close the div ??

• http://www.facebook.com/francisco.yantorno Francisco Yantorno

  Hi! I'm looking for the same as GhamsteR here… I want to make it automatically popup when entering the page. But I'm kind of a newbie here.. Where do I actually need to place that pice of code? Thanks!!!

• Diego

  Very well made scripts. Thank you for your help, I really appreciate it!

• Chirag999

  </div>

• Dially321

  well made script, but doesnt work on IE 7.  i have the grey layout on the correct place but content (picture jpeg) appears below the content.

• Ishan

  thanks.. it work well..

• Nnnn

  hi

• Nnnn

  hi

• Nnnn

  who

• Nnnn

  hh

• MinMin

  who

• MinMin

  go

• MinMin

  aaa

• MinMin

  ha

• MinMin

  www

• MinMin

  thu

• MinMin

  oh.

• MinMin

  ooo

• MinMin

  iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

• MinMin

  kokoko

• MinMin

  pp

• MinMin

  www

• MinMin

  kk

• MinMin

  mmmmmm

• MinMin

  llllllllllll

• MinMin

  dd

• MinMin

  nn

• MinMin

  mm

• MinMin

  nnnnnnnnnnnnnnnnn

• http://www.facebook.com/alan.desenvolvedor Alan Rezende

  teste

• Wim Merlijn

  Works perfect. Tnx. One question. When the tiny box opens I do not see the embedded tag >"<a href="#" onclick="window.print()">Klik hier om dit uit te printen!</a>". When I open the the HTML standalone I tdo see this tag. Hopefully there is an answer to this. Many thanks

• Carlton

  I would like to be able to close the box from a button image inside the box. Is this possible?

• shannon

  Hi! I am having issues getting the modal box to work when i have a youtube video on the html page that it is masking. The youtube video appears on top of the tinybox. Is there an easy way to fix this? This is only an issue in Internet Explorer.

• Matthijs

  Hi, I have the same problem in chrome. Can anyone help?

• http://www.flyingrocks.hostoi.com/ Wenag

  Hmm..I am trying to learn more about this modal window script.I will search for more info.

• Dfds

  vcbv才

• Cvx

  xvcxc

• Udara Madushan

  Maxxa, very nice machan, Good luck for your futures….Thanx a lot
   

• Martin Langmaid

  Javascript security issue when launching from a local folder. Upload it to a web server and run from there.

• soda making machine

   http://www.gdtplfresh.com/soda/

• Richard Pilkington

  Great Script!
  how do you submit more than 1 variable via post?
  1) TINY.box.show({url: "myurl.php", post: "mainid=" + varMainId + ",subid=" + varSubId});
  or
  2) TINY.box.show({url: "myurl.php", post: "mainid=" + varMainId + "&subid=" + varSubId});

  Thanks for great script

• Jaideep Singh

  Hey Can any one tell me that is how we use jquery.validator function in tinybox??

• Shahil Sham

  Its because the file it's trying to fetch dosent exist
  /../advanced.html

  T$('testclick1').onclick = function(){TINY.box.show('advanced.html',1,300,150,1)}

• Shahil Sham

   Having same trouble here

• Shahil Sham

   Its option 2), or u could just club the parameters to the url itself..
  url: "myurl.php?mainid="+ varMainId +"&subid="+ varSubId+""

• http://nolantheplant.com/ Nolan Plant

  Yes you have to set the wmode to transparent or opaque. 
  Add &wmode=transparent or &wmode=Opaque to the end of the video's URL. If you are using the embed code add wmode=”opaque” or wmode=”transparent” 
  Best to search google for the youtube API if you are still having issues. Good luck!

• bhadz

  I have a div that has children in it which is called by ajax, then after onComplete call the div is set as HTML in the tinybox.
  How to put an event of an ID that is inside that div? because When i try to add an event in the onComplete function, it has no effect or the event doesnt work. I also tried to put the event before the ajax call but still no effect. I found out that the event is loaded but the tinybox is still rendering the page I think.
  Can you help me with this? Thank you.
  regards,bhadz

• jorge

  Hello, 

  So i'm using tinybox to a Login system, my problem is when i press the "regist" button if all the fields are empty it display an error message (np already done) my problem is it when there is no error how can i close the tinybox when i press "regist" and every thing is fine.

  I've try withing the PHP code put some "tinybox" code to close it but i'm yet learning about javascript.

  If someone could help me out i rly appreciated

• ihacklog

  Thanks for your method,I'll try it.

• http://www.greathomeremedies.com/ Home Remedies

  Thank you very much for the little tutorial. I inserted the code you just gave me and it seemed to work for me.

Supported By