JavaScript Modal Windows – TinyBox2

Javascript 264 responses so far

JavaScript Modal Windows

This update to the TinyBox modal box script brings a ton of new features and still clocks in under 5KB. The script now supports iframes and images natively. You can POST with Ajax. Clicking ESC will close the window. Callback functions can be passed for load and close events. You can set CSS IDs to override the default styling. CSS position can be toggled between fixed and absolute. The mask opacity can be sent. You have full control over window location. And of course there is now a close button out of the box you can toggle.

The script is now executed by passing an object due to the large number of options. There is nothing to initialize, just call the function on whatever mouse or browser event you like. A sample call would look like the following:{url:'advanced.html',width:300,height:150})

Parameters include (tag – description (type) – default):

html - HTML content for window (string) - false
iframe - URL for embedded iframe (string) - false
url - path for AJAX call (string) - false
post - post variable string, used in conjunction with url (string) - false
image - image path (string) - false
width - preset width (int) - false
height - preset height (int) - false
animate - toggle animation (bool) - true
close - toggle close button (bool) - true
openjs - generic function executed on open (string) - null
closejs - generic function executed on close (string) - null
autohide - number of seconds to wait until auto-hiding (int) - false
boxid - ID of box div for style overriding purposes (string) - ''
maskid - ID of mask div for style overriding purposes (string) - ''
fixed - toggle fixed position vs static (bool) - true
opacity - set the opacity of the mask from 0-100 (int) - 70
mask - toggle mask display (bool) - true
top - absolute pixels from top (int) - null
left - absolute pixels from left (int) - null
topsplit - 1/x where x is the denominator in the split from the top (int) - 2

Nearly all of the parameters above are optional. Of course you must include either the html, iframe, url, or image parameters as they drive the content. Height and width are option and will be calculated based on offsetWidth and offsetHeight in the case of HTML or Ajax content else by actual width and height with images. Iframe calls must include a height and width. By default the box will animate in the center of the screen in a fixed position.

Click here for the demo.

Click here To Download.

This script is tested in IE7+, FF, Chrome, Opera, and Safari and is available free of charge for both personal or commercial projects under the creative commons license. This is a never-ending work in progress and I welcome any bug reports.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Scriptiny Editorial (see all)

  • Mhenderson

    Nice. It's small and handy.

    Could it be used in a slideshow?


  • Anonymous

    Sure. It doesn't have gallery functionality built-in like some scripts that use rel selectors (not yet) but you could easily embed a script like TinySlider into the popup via an Ajax modal and then a load callback. Can add an example if others are interested too.

  • gsid

    So good. Really like it.

  • Line_Yoble

    >> Can add an example if others are interested too
    I am ! 😉

  • Looks good! How does it compare to Fancybox?

  • Fiscme

    me too, this looks great!

  • Example would be great! :o)

  • Line_Yoble

    Hi leigeber,

    Thanks a lot for this plugin which is nearly perfect.
    Nearly, because it lacks two features FMPOV :
    – A movable option (with a title bar)
    – A non modal option
    And then it will be overperfect…
    When do you plan to publish TinyBox 3 with these options ? Tomorrow ? 😉

  • Anonymous

    You can toggle the mask to essentially toggle it being modal. I published a draggable box script awhile back, may consider merging it into V3, we'll see.

  • Anonymous

    It is not as robust at this time. I tried to cover the most practical features though and keep it as lightweight at possible. Fancybox is jQuery based as TinyBox is standalone.

  • awesome *thumbsup*

  • thank for sharing, I'm using thickbox & fancybox, they're too good, maybe I'll try TInyBox in the next time

  • Ygslys

    thanks for sharing

  • Thanks for amazing tool!

  • This is a perfect upgrade! Thanks!

    I'm not able to get the ESC key to close the window however. I'm on a mac on Chrome.

  • Jeffa

    Nifty! The: "Custom Position, No Mask, Auto-Hide" is what I've been looking for with an extra twist though, I'd like to use it so that it is displayed the first couple times someone visits a site. Perhaps to point out a policy or resources page. Can someone recomend a plugin to accomplish this? I would be attempting to implement that in wordpress, and Orchard.

  • awesome, I think i'm gonna start using this code in my own site – thanks.

  • Rasgut19

    great work, thanks

  • Jeebus

    When I click on (Ajax Post, Fixed Width/Height, Light Mask, Custom Vertical Split) it wont open the pop up box. What am I missing to make it work? I have the original files, just clicking on them does not work in Firefox nor on IE or Opera. It only attempts to keep loading but never loads. Any idea why?

    What I wanted to do is make links to pop ups that display different information from a different html page. I appreciate you making this code available. I'm new to this but still cant figured out.

  • Thanks, thats exactly the thing I needed for my tiny project of myself 🙂

  • Anonymous

    Since it is Ajax you will have to be running a web server of some sort. I suspect you are trying to run it on your local computer?

  • mHenderson

    Yeah, if a slideshow could pop up that would do what I really want.

  • Anonymous

    I can't recommend a plugin but if you do a little reading on cookies you could easily work this out on your own. You would check for the cookie, if it doesn't exist create it and write a 1 then on the second time do the same but if it exists increase it to 2. Then just print out the function call if it is relevant. Alternatively, you could log the IP/username in a database and iterate there if you don't want to rely on cookies.

  • joja

    TinyBox 2 don't work in IE6 🙁

  • Neuronsoftsols

    good work.Thanks for sharing

  • Anonymous

    I haven't tested in IE6 but likely it would be a quick fix. I am no longer testing in IE6 at all for most all projects unless it is specifically requested and will no longer be testing in it for scripts I release.

  • Bijusubhash

    ie6 almost dead…

  • Biju Subhash

    great plugin …
    thank you

  • Zonalcoder

    Dragging is a very important feature. Please implement it. Thank you.

  • Simon

    Great script thanks! Just one issue – the Escape key to close is not working for me in Chrome in Windows. It does work in Firefox and IE.

  • Yes! Please add an example…

  • Norman Fisher

    I added the files to a VS2008 project and made Javascript calls to{image:'filepathandname.jpg'}) and got no response. So, I guess I didn't like the product very much. I'm certain it must be something very simple, but I can't figure it out and there's just not much information about tinybox2 on the web. I do admit I'm pretty ignorant of how this should have been tied to a project … and yet, I still complain. I'd "like" to use it. 🙁

  • Anonymous

    Without an error message or link there is nothing anyone can do for you. Nothing special about integrating with a VS2008 project, just making sure all the files are in the right places and referenced correctly.

  • Anonymous

    This has been resolved and an unused variable was also removed.

  • Kevin

    This is great!

    How would I go about passing a URL variable. I tried the code below with no luck.

    <a href="'inc_single_event.php?eventid=test',1,0,1)">more</a>


  • Kevin

    Nevermind! Just tried iframe version with success. Thanks so much!

  • George R.

    Great man. Work posted here is a must-have for all those who work with native js. My congratulations.

  • Rob Wheatley

    Hi there, loving this – nice and light and exactly what I needed. 2 problems though – one major.

    1st problem – I'm using this to play a youtube video in the popup set to autoplay. It all works fine in Chrome, Firefox and IE. But in Safari on a Mac the video doesn't play. In fact it looks like nothing loads in the pop-up at all. I just get a white square.

    2nd problem – In all but Safari the close cross on the top left corner is behind the pop-up rather than on top. I guess this could be because the video isn't loading and the moment it does load it will be forced behind too. It means you only get to see 3/4 of the cross and it doesn't look so good.

    Maybe I'm doing something wrong as I dont really know what I'm doing if I'm honest….

  • Rob Wheatley

    Oops, this is the call I'm making….


  • Rob Wheatley

    Maybe this will help you help me. I've looked at the safari console and I can see this error:

    Unsafe JavaScript attempt to access frame with URL MY SITE from frame with URL YOUTUBE. Domains, protocols and ports must match.

    I've redacted the URLs a bit but you should get the idea.

  • Guy Fawkes

    Any suggestions on how one would go about implementing a dynamic resize of the modal window ? I'm considering using the script to display a form with client-side validation, which displays error messages that affect the size of the window.

  • Rob Wheatley

    Ha! All sorted. My bad. I wasn't handling the object properly in the iframe.

    Adding a boarder fixed the problem with the close cross graphic (the video was being overlaid without a boarder, adding one gives the room you need).

  • Joel Bouckaert

    I will definitely be using this in some of my upcoming projects. Thanks for the great post!

  • emags

    Is it possible to open a hidden div that exists on the current page?

  • Anonymous

    In the demo there is an example of resizing, is that not what you are looking to do?

  • Anonymous

    It is possible, sure. You could modify the script, add a separate function that takes the div ID and object and then adds the html property to the object based on the div's innerHTML T$('divid').innerHTML, or you could pass T$('divid').innerHTML directly but that isn't very clean.

  • emags

    Thanks for the quick reply. That's a bit beyond my expertise.

  • Anonymous{html:T$('divid').innerHTML,width:300,height:150})

  • CodeMyConcept

    Great way of explaining it, people understand better by watching the process

  • Bensita

    Hi I´m using the spectacular TinyBox2 in a new project, but I cannot find the place to make the cursor change to the a hand? to tell the visitor CLICK HERE haha well thank you !

  • Anonymous

    In the CSS: cursor:pointer

  • Bensita

    Grazie !

  • emags

    I used the iFrame first as I have content that exceeds the viewport. However, I need the content on the page for SEO reasons. Would love to use your script as it is clean, browser compatible, and nice looking.

  • Anonymous

    Look at the overflow:auto CSS property in conjunction with a fixed height. It will introduce a scrollbar when necessary, accomplishing what you need.

  • Ivash

    Wonder how to make this work for IE6. I looked at the previous version code and it appears that you use 'div'. But the current code seem to be more flexible and I am not sure how to tweak it to make it work in IE6. Any pointers are highly appreciated.

  • malika

    Hi, I don't know how to recall this script in php page.

  • This will surely come in handy – will make a website look different than the rest. Thanks for the great post!

  • Bensita

    Hi, I want to use TinyBox2 to open some lyrics and it look nice; but there´s a problem that is bugging me.

    listofsongs.html is loaded inside an iframe.
    This html contains all the links that open with TB2.
    The problem is this: the iframe measures are 570×420 px, so TB2 displays only inside that iframe, and I want to use all the screen.

    Somebody who can help me?

    Thanks !

  • Anonymous

    What is listofsongs.html an Iframe? You can call a function on the parent but I'd work on getting rid of the iframes if I were you.

  • Bensita

    yes, that is what I´m trying to do, but I didn´t find the way yet.

  • Spoofed Me

    Hi I'm using TinyBox2 to open an iframe popup of google maps and trying to put a php variable in the post: section of the call it looks like this:

    <li onclick="{iframe:';, post:'<? echo $search.','.$map;?>',boxid:'frameless',width:850,height:550,fixed:false,maskid:'bluemask',maskopacity:40})">

    where $seach = [some address]
    and $map = "

    It seems to be coming up but with out the passing post data.
    What am I doing wrong?

  • alan thomshon

    Wow! So wonderful, I like it, thanks for sharing this with us. Congratulations! You have the wonderful writing & presenting skills. I am hoping in future same work from you.
    Thanks once again.

  • alan thomshon

    I found this informative and interesting blog, so I think so it’s very useful and knowledgeable. I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me. I really thought that blog is spreading its wings rapidly…
    Thanks a lot.

  • Anonymous

    The script is not setup to post to iframes currently. Why don't you use the Google Maps API? I will look into adding the iframe posting soon but in the meantime is there not a way to pass the address in the querystring? Seems like I did that years ago.

  • Brandon

    You may have seen the
    style="visibility:hidden;" onload=" = 'visible';"
    line of code used to eliminate a flash of white background in iframes on some browsers. Does anyone know how to add it to the tinybox.js file? I tried adding it after
    but it didn't work.

  • PSTR

    Can this be used from I have tried and it keeps saying object expected when it comes to my function that calls

    <script type="text/javascript">
    function ShowWait() {{ html: 'This is a warning!', animate: false, close: false, boxid: 'error', top: 5, autohide: 3 })

    Thank you for any ideas you might have.

  • Ivash

    Solved IE6 issue with iframe. The close button in iframe came ugly but this fixed it;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/close.png', sizingMethod='crop'); I was able to position the popup close to the hyperlink rather center.

  • AK

    Is there a way to make this draggable so that users could drag a tinybox and resize it the way they want?

  • Anonymous

    Sure, probably will be part of v3. In the meantime look at TinyEditor for a resizing example and for the dragging. Mesh the three and you will have it.

  • SiL3NC3

    Hi there, what a tiny nice script, so i decided to share feedback.
    I encountered a design issue … that the rounced corner windows disappears after displaying the image demo and the IFrame demo. Can you please fix this, to keep the same styling at all time. Thank you mate!

  • Hello

    Hi i have an issue while trying to open the tinebox that is set to load html content from a php page. Now the scenario: if i open the box and php code is good then the box is opened and content is properly shown but if i opent the box and the php page has some errors then the box is opened and errors a shown and finally if i correct the errors and reopen the box the content remains as it was the last time when the errors were. this happens only in IE. I've monitored the outgoing traffic with fiddler and IE is not sending the request after php error.

  • SEO Birmingham

    The posts by various viewers are awesome. How helpful people are in computer world.

  • Anonymous

    The download link doesn't work!

  • Anonymous

    The onkeydown event on the page that is loaded via ajax doesn't function. It seems the script has interfere with the event. Any thought?

  • Anonymous

    Wonderful script, thank you for sharing. I'm having trouble opening the lightbox on an ipad. After clicking the link, a small white box appears with a loading icon, and then nothing actually loads, it just sits there. Any help would be greatly appreciated!

  • Ploshka

    Cool script. But IE9 (ver 9.0.8112.16421) doesn't react on click (only compatibility mode work). Bug?

  • Softive

    it's cool but if somebody knows how to put it work with IE6 or 9? probably use Tiny Box 1 instead 🙂

  • Anonymous

    I am testing in the exact same build and it looks to be working just fine both w/ and w/o Compatibility Mode enabled. Are you testing from the demo site, locally, or what? What OS version?

  • Anonymous

    Not seeing any IE9 issues and not supporting IE6 anymore although it is probably wouldn't take much to make it IE6 compatible.

  • Anonymous

    I actually don't have an iPad but it works on my iPhone so I am surprised there is an issue. Without an iPad to test on there isn't much I can do.

  • Great script!

    But I found a minor inconvenience.
    Script starts with "TINY={};" and that prevents to use it together with tinydropdown2 script.

    I solved that by starting script with "if(typeof(TINY) == 'undefined') TINY={};" instead of unconditional "TINY={};".

    Once again, thank you for this great script! 🙂

  • Great script!

    But I found a minor inconvenience.
    Script starts with "TINY={};" and that prevents to use it together with tinydropdown2 script.

    I solved that by starting script with "if(typeof(TINY) == 'undefined') TINY={};" instead of unconditional "TINY={};".

    Once again, thank you for this great script! 🙂

  • Anonymous

    Ideally you would merge the two JS files, removing the object, T$, and T$$ from the second file. Keep those HTTP requests down.

  • Kevin

    If a modal window has a form in it, how do we close the modal window when the Submit is clicked? Adding the onClick event to the submit button does not work.

  • Anonymous

    If you are posting with AJAX then it should be part of your postback function. If you don't care about waiting for the response then try adding it to the onsubmit method on the form.

  • Hello, thanks for this script !
    how is it possible to auto-show a box ?
    thanks for your answer, sorry for my bad english 😉

  • Anonymous

    Sure, just call from the onload event.

  • Mdamico

    I was wondering the same thing. Is this what I would add to the onsubmit method on the form:


  • Anonymous

    Yes, I think the actual function would be

  • Jonny

    Thanks for this script dude! It was EXACTLY what i was looking for. Something without dependency of other libraries. Really cool!!

  • This is a great script. I have a couple questions. I can't get images or css to load when using the AJAX call (i am using this so that the popup resizes itself). Is there anyway to make sure these are loaded?

  • I think I might have to use the full url file path instead of just linking the filename. I will report back tonight.

  • Mdamico

    My hypothesis was correct. I used the full url path during the Ajax call and both images and css loaded correctly. I also converted urls to hyperlinks using this code:

    $pattern = "@b(https?://)?(([0-9a-zA-Z_!~*'().&=+$%-]+:)?[0-9a-zA-Z_!~*'().&=+$%-]+@)?(([0-9]{1,3}.){3}[0-9]{1,3}|([0-9a-zA-Z_!~*'()-]+.)*([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z].[a-zA-Z]{2,6})(:[0-9]{1,4})?((/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)*/?)@";

    $body = preg_replace($pattern, '<a href="" Target="_blank"></a>', $body);

  • jdigital

    The demo is acting up in IE9 with compatibility view off. It flickers quite a bit, then acts up as the mouse is moved.

  • jdigital

    I guess it was a memory issue. I closed all my tabs and reopened the url in IE9. Seems fine now.

  • firefox 3.6 ¿pop up?

  • Levent ERDEM

    Hi, thnx for great tiny script.
    i can not use mask z-index. mask and box indexes are set to 800 and 900. i want to make a div with z-index=990, and do not want to cover it mask and tbox. is it possible?
    i'll make a menu and use tinybox for holding html pages, seems like flash animated web page.

  • Chris Creighton

    Is there a way to have OK or Cancel buttons on the modal? And then return the result back to the call page? Of course when one of the buttons are pressed then the modal would close.

  • Levent

    Giving – for z-index works fine. z-index=-2

  • Tim Johnston

    Is that an option? IE6 is bad, we all know, but its still out there and your samples are unusable in IE6 – any help greatly appreciated (particularly if it doesn't take much to make it compatible…). Thank you. TJ.

  • Hello, i have a "small" issue. When calling; the iframe and dialog disapears but the mask remains 🙁 on IE8.

    Is there any incompatibility with other js libs ???

    Any ideas ?

  • Mdamico

    Is it possible to replace # in the href link incase the client's browser doesn't support jacascript? I have tried and when I click the link (with javascript enabled), the tinybox begins to appear and then the page is redirected to the href. Here is my example:

    <a href="link.html" onclick="{url:'link.html',opacity:40})">Click Here</a>

    I am doing this for SEO purposes so that link.html is indexed. Thank you in advance.

  • Mdamico

    MY example showed as a link instead of wanting to show it as code. Here it is:

    [a href="link.html" onclick="{url:'link.html',opacity:40})">Click Here</a]

  • Mdamico

    Figured it out. Added this code to the onclick event:

    return false;

  • Brendan

    I have a form with validation that populates a div above my form tag with error messages, it does not refresh the page since its done via ajax call and then the div is updated. How can I resize tinybox to allocate for the extra content?

  • jt

    Having issues with close button? It must be placed on parent page only?
    Not working with chrome, cannot close with link and no X's appear. Thoughts?

    thanks in advance,
    great script so far, btw! good job

  • Anonymous

    IE6 bug and solution.

    Parameters d are used to control fadeIn (d=1, call in ), or fadeOut (d= -1, call in function hide () ).

    but, "d = -1" or "d = 1" are true. If we close the opened tinybox, the box's opacity will clear, and cause dead circulation.

    Modified into " if (d = = 1) {…}" after normal

    Delete :"'fixed':'absolute'; "
    Instead of using ";"

    thanks in advance,
    great script so far, btw! good job

  • Anonymous

    IE6 bug and solution.

    Parameters d are used to control fadeIn (d=1, call in ), or fadeOut (d= -1, call in function hide () ).

    but, "d = -1" or "d = 1" are true. If we close the opened tinybox, the box's opacity will clear, and cause dead circulation.

    Modified into " if (d = = 1) {…}" after normal

    Delete :"'fixed':'absolute'; "
    Instead of using ";"

    thanks in advance,
    great script so far, btw! good job

  • Jerry Mcneive

    hi. a bit of a JS novice, but I would like to change the of div.tinner and div.tcontent, specifically the height and width properties, but I am baffled by how to do that from within tinybox.js. You mention in the summary above that you can add CSS IDs to override default styles. That is essentially what I would like to do. Any help is greatly appreciated.

  • Mmokhtabad

    dude you are amazing

  • love your script but please dont use globals in your css, it conflicts with base css styles.

  • Jacob Buck

    how would I go about adding a reload/refresh function for everytime you close any of the pop up windows the parent window refreshes??

  • Adrian Rössler

    It seems image popups, containing files that are bigger than the screen, are cut off at the bottom without any way to scroll over them. Can anyone confirm this?

  • hi!
    how load youtube video into tinybox2?

  • Nestor

     Hi!, how can i use this script with the sorter script in the same page?

  • link96

    hi! great job, thank you!
    is possible to open the tiny box in a different frame?

  • Adrian Rössler

    By now i have written my own lightbox derivative, as i only need the image-popup functionality. (For text-only content it should be much easier.)

    To get the mask to cover the screen on a re-sized (scrolling) page, you need to:
    – create the image object in JS with its src='img_url' parameter
    – wait for it to load ( big_img.onload = function() { …build popup… } )
    – retrieve it's size & apply suitable CSS scaling to its container
    – append container to DOM
    – determine new document scale
    – apply scaling to mask (+ extra padding)
    – determine scroll position and apply new margin-top to img-container

    This works very well here and all new browsers without any quirks.

  • Mtoaginc

    Wow its really useful and creative info. I say thanks for the nice sharing.
    <a href="">PHP Programmer</a>

  • Really Great Work…Keep it up….

  • Albert C

    hi ive used url + post option, so it calls a page with form, how is it possible that when it submits, the return value will be on the same modal pane, the modal box will not close until i close it..  i need confirmation of result from the form submit..

  • Joey

    great work!  im using wordpress and wanted to implement your popup to display a post.  is this possible using the url-post string?  For example, i wanted to popup only the post   not the whole page, just the center post.

  • Joey

    nevermind.  got it to work by creating a template to show post only.

  • gr8….great I like this blog …

    I am a <a href="http://theweb-coder">Web Coder </a>… it help me ….

  • Asdc

    <input type="submit" name="activate" value="Activate" onClick="if(document.activate.code.value==''){{html:'Activation code missing.',animate:true,close:false,boxid:'error'});}" />

    wont work, where Im wrong? THNX !


  • Anonymous

    Is it because you're missing another "


    I'm not a JS wizard but that's what stands out for me.

  • Cvmircea

    How can i make a submmit button of a form to send variables to "test.php" file and open it in a pop up window with TinyBox?

  • rakesh maurya

    the mask is not covering the parent window's scrollbar. What should I do?

  • Joe

    Cool, great script, i'm novice in scripting and it's very usefully … i can't only see cross on corner left in iframe example (in other posts i can't see this issue.. sorry), thanks

  • Jamescraigmtts

    Great blog.This is really useful for me.Thanks for sharing this information.

  • Stevetickolo

    It's a very nice blog.
    Great………..<a href="">Online Shopping Cart</a>

  • Bmckray

    Is there a way to make the window automatically pop up after a delay. Or when some enters or exits the page?

  • Davnis

    I found this script amazing. small and nice made. 
    I wanted to use it to show up animated forms : signup, reset pass or login. 
    after I did all the froms I realize that i can't pass my forms values to php.

    I use : href="'user_login.php?show=reg',1,0,1)
    or href="'user_login.php?show=log',1,0,1)

    and the php show diferent form and animate nice. but I can't send values from the form to that php to get forward.

    can anyone give a help ? thank you very much !!!!!

  • Santhosh R Subramani

    Can anyone help me how to close the popup with a custom button in the popup page

  • Santhosh R Subramani

    When i used  in anchor tag for custom close button  – firebug showed me an error as

    e is undefined in the following function


  • Asdf

    you can't run javascript inside the modal window?

  • How do you post more than one variable to the (either from a page to it, or from another

    I tried using forms, but apparently they don't work from one box to another, called either with .fill or with .show…
    The only way I have found for now is to pass the all in one huge string and explode it after to an array. not too bad, but definitely not optimized.
    Please help!

  • Excitement article with relevant script example. Definitely try to implemented & recommend to others. Thanks for the script.  

  • Dominik

    fantastic work sir! very light weight stand alone sollution.

    I used it for displaying Images in various sizes which caused a problem for overstepping the view port of the browser without the ability to scroll the rest at least so I wrote this extension.
    hope it helps someone:
    (imageWidth and imageHeight is the size of the image, in my case taken from the php getimagesize() function)

    html link>
    <a href="#" onClick="{image:'image.jpg',animate:true,width:winS(imageWidth,imageHeight).w,height:winS(imageWidth,imageHeight).h})"><img src="imageThumb.jpg"></a>

    the CSS>
    .tbox {position:absolute; display:none; padding:14px 17px; z-index:900; overflow:visible;}
    .tinner {padding:0px; background:#000 url(../image/preload.gif) no-repeat 50% 50%; border:1px solid #cecece; overflow:auto;}
    .tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800;}
    .tclose {position:absolute; top:0px; left:6px; width:22px; height:22px; cursor:pointer; background:url(../image/close.png) no-repeat 0 0;}

    and the JS>
    <script type="text/javascript" src="scpt/tinybox.js"></script>
    <script type="text/javascript">
       function winS(w1,h1) {
        var width = 0;
        var height = 0;
        if(!window.innerWidth) {
         if(!(document.documentElement.clientWidth == 0)) {
          width = document.documentElement.clientWidth;
          height = document.documentElement.clientHeight;
         else {
          width = document.body.clientWidth;
          height = document.body.clientHeight;
        else {
         width = window.innerWidth;
         height = window.innerHeight;
        if(w1>(width-50)) width-=50; //display not bigger then 50px to frame
        else width=w1;
        if(h1>(height-50)) height-=50; //display not bigger then 50px to frame
        else height=h1;
        return {w:width,h:height};

    note that I have taken out the CSS :hover for .tclose for cosmetic reasons.

  • Dominik

    I was not aware the this comment feature will swallow my html anchor… 😉
    here is the html for the above example:

    html link>

    <a href="#"

  • Any way to disable TinyBox fading?

  • Stuartl

    Hi,  I am trying to use TinyBox to display google recaptcha form using javascript api. It isn't working at all. I need to use the fill function but only to fill one element of my form not replace the entire contents of tinybox.

    Is there a solution I should know about?

    I have an old version of TinyBox which has a method called "show2" which calls an initialise function. That managed to work with recaptcha. I can't get it to work with this latest version…. and I need to use the latest version.

    Please help.

  • No support for inline html?  I'd like to be able to just give it the id of a container on the page and use that for the window contents.

  • Foo

    for those having trouble understanding how to get JS working within a modal window, you need to use the openjs parameter:{

    As long as myCustomFunction() is defined within the scope of the page calling the modal, it will be accesible in the modal. Hope this helps out.

  • sjmdesigns

    First off, great script. Wonderful stuff and very full featured for my use. THANK YOU!

    I do have one question…

    I have a page that gets view in an iframe. I want to use TB to open a video (using iframe option). However, I want it to open the TB overlay over the parent window. Currently it opens over the page *inside* the iframe (gee, I hope I explained this correctly.

    While I'm not a JS writer, is there something I can alter in the script to achieve this effect? With your permission of course 🙂

    Again Great script.

  • thanks for this script, i will use it for my website

  • Williamhatter

    There seem to be issues with Chrome and Firefox. It works great on Version 7, but has issues on Version 5/6.

  • Isra

    how do you install script on website? I want to install it on my websites index so customers see script first! thank you for your help and time.

  • Csanyigabi

    thank you for this great script! i would like to use it more then once on the same page. is there a way to do that? (it's a press clippings i'm working on which would pop up the inside page by clicking on the cover page) thank you in advance. i appreciate it!

  • Pankajandsaha

    after opening the modal window , if u click on the grayed background modal window is gone .is there anything can be done so that only on click of the cross will close the modal window nothing else

  • Work like a charm and without any error or conflict with other frameworks like jquery or mootools.. Thank you.

  • Very nice. Thanks

  • Unomyname

    Unfortunately does not look as great for ie6…

  • Brijesh Jain

    Have you got any solution for your question?
     {if u click on the grayed background modal window is gone .is there anything can be done so that only on click of the cross will close the modal window nothing else}

  • Brijesh Jain

    Have you got any solution for your question? {if u click on the grayed background modal window is gone .is there anything can be done so that only on click of the cross will close the modal window nothing else}

  • Linkzeroct

    Any idea how to handle IE caching?  VERY FRUSTRATING!!!

  • Brijesh Jain

    remove m.onclick from line; 
    in show function and it will work.

    new line in show function will be;

  • Brijesh Jain

    Got it resolved!!!

    remove m.onclick from line; 
    in show function and it will work.

    new line in show function will be;

  • Brijesh Jain

    any solution for the above problem ?


    When i used  in anchor tag for custom close button  – firebug showed me an error as

    e is undefined in the following function



  • Brijesh Jain

    [When i used  in anchor tag for custom close button  – firebug showed me an error ase is undefined in the following functionalpha:function(e,d,a){clearInterval(;if(d){;'alpha(opacity=0)';'block';}{,a,d)},20)}]

  • Brijesh Jain

    Got it resolved by using; 

    onclick of button.

  • Brijesh Jain

    Got it resolved by using; 

    onclick of button.

  • Brijesh Jain


  • Brijesh Jain


  • Ricky

    how to make it autoload?

  • Neth

    Can anyone tell me why I can't bind the function to elements of a certain class, I want to avoid having to type the inline function on every element I want the to apply to… 

    Can't get my script to fire… 

    var ONLOAD = { getClass: function() { if (document.getElementsByClassName == undefined) { document.getElementsByClassName = function(className) { var hasClassName = new RegExp("(?:^|\s)" + className + "(?:$|\s)"); var allElements = document.getElementsByTagName("*"); var results = []; var element; for (var i = 0; (element = allElements[i]) != null; i++) { var elementClass = element.className; if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass)) results.push(element); } return results; } } }}var RUNTINY = { prepImageLinks: function() { var allImageLinks = document.getElementsByClassName('hasImage') for(i=0; i < allImageLinks.length; i++) { var imageLink = allImageLinks[i].href; allImageLinks[i].destination = imageLink; allImageLinks[i].onclick = function () {{image:this.destination}); return false; } } }, prepVideoLinks: function() { var allVideoLinks = document.getElementsByClassName('hasVideoYT') for(i=0; i < allVideoLinks.length; i++) { var videoLink = allVideoLinks[i].getAttribute('href'); allVideoLinks[i].destination = videoLink; allVideoLinks[i].onclick = function () {{iframe:this.destination,width:420,height:345}); return false; } } } }ONLOAD.getClass();RUNTINY.prepImageLinks();RUNTINY.prepVideoLinks();

  • Neth

    NM, I figured it out, there's jQuery on the page I already have so I used this function hope this helps anyone out there…

    $('a.hasVideo').each(function() { $(this).click(function() { var vidLink = $(this).attr('href');{ iframe: vidLink, width: 300, height: 250 }); return false; }); });

  • Henra Sung


    any1 can help ? the script work great on firefox and chrome . but IE9 the image always in the bottom not in the centre.

  • Anonymous

    we are a manufacturer offer about genuine leather bag like electronic bag, evening bag, handbag, wallet,clutch bag and so on ,we have professional design team and unique ,welcome you vist our website,if you like our product please contact us thanks. 

  • moi

    very good script , very fast and small code nice.

    Just 1 bug bother me , in IE8 when there is many image on page that use this script.the big image background does not stay transparent grey but become black.

  • Toadbomb

    This is mostly working great for me, however I have noticed that in IE9 when using the url parameter for the box, I just get the loading .gif, and it never loads the content. Works great in Firefox and Chrome, however, and also works in IE9 if I use an iframe instead.

  • Toadbomb

    This is mostly working great for me, however I have noticed that in IE9 when using the url parameter for the box, I just get the loading .gif, and it never loads the content. Works great in Firefox and Chrome, however, and also works in IE9 if I use an iframe instead.

  • 荒野无灯

    got it.Thanks for your code. I used Tinybox2 in my WordPress blog now.

  • I have also noticed that it has trouble working on an iPad. Is there any update to fix this? I am not sure if there is a good iPad emulator out there but I believe you can download some. Getting the same issue as redwoodsmedia

  • Brijesh Jain

    Resizing of tinybox is not working for iframe, do any one have faced the same problem?

  • Erocketfuel

    Its amazing!! tinybox is very useful. thanks for sharing a new concept.
    <a href="">social media consulting</a>

  • Brijesh Jain

    I would like to thank for this great script. It works great for me and relieve my lot of burden.

    I am facing problem while resizing the iFrame window. It doesn't resize but repositioned on same screen. Can you please post some code to resize the window using iframe.

    Thanks in Advance 🙂


  • I see here where POST can be used.  Can someone give me a simple example how I can pass my form fields to the new page with post here?  

  • True, there are issues with iPad: even a simulator like will show that there are times when the white windows remains empty and small, waiting for a content which does not appear. This should be investigated, definitely.

    As my own, personal issue was retrieving content which was hidden on the very page, the solution was to hide it within a div:

       <div id="hiddendiv" style="display: none;">
    This text is hidden…
    </div>And then retrieve it straight on the modal window this way:{html:document.getElementById('hiddendiv').innerHTML})which appears to work even on the iPad.I hope is might be of help to somebody.

  • Anonymous

    Very nice! The is the first good example of pure javascript I've seen in a very long time.

    Everyone seems to be completly reliant on frameworks these days (which is not necessarily a bad thing)

    We might start using the script on the portfolio section of to display more information on the projects.

  • mmorse

    Great script! I've found one issue though. I added a different color mask in the css maskid:'bluemask' and used the maskopacity:40 param to change the opacity. It didn't work. I then changed to opacity:40 and that did work. I tested in FF, Chrome and Safari on a Mac.

  • Vinay

    any help on loading multiple instances of the popup in the same page

  • Damon

    Hey, Is it possible to get a fadeOut when tinybox is closed?

    In my page i have a <div onclick…etc…> calling a seperate html page using iframe parameter.
    I have animate turned on and it works when loading up, but when i close it it just disappears.Is there a fadeOut on tinybox or is it just something wrong with how ive set it up?I have the .js and .css files called on both the container page and the loaded page.the site is
    (will re-upload to server now)

    Thanks in advance guys and gals, this is for my online portfolio so i really want everything perfect.

  • Great script! I've found one issue though.

    it will very helpful
    to me for my <a href=''>website

  • I've been looking for a script like this since yesterday. Great one 🙂

  • Sumal T.Jayaranga

    Not works in ie6, any solution for this matter??

  • I would like to have an option that allows to enable/disable TinyBox mask fading.
    Any chances to get that in the next version?

  • Hacker

    yes! don't use or support IE6!
    (reminder: we live in the 21st century)

  • Vaibhavdesai137

    Thank you so very much for this. It is awesome. I tweaked it to do what I needed to do. Your one little example "index.html" was helpful in creating this. I have attached an image so that people understand its real power.

  • Web design London

    Great script! I've found one issue though. I added a different color mask in the css maskid:'bluemask' and used the maskopacity:40 param to change the opacity.

  • Hi, great piece of work, I am just having a small problem with the JS-PHP interface…
    I have a form like the following where I call the post.php with the javascript function

    <form action="{url:'post.php', post:'id=jobtitle12', width:200,height:100,opacity:20,topsplit:3});";

    The post.php is just
    <?php echo $_POST["id"]; ?>

    This should place the content of "jobtitle" right in the popupbox, ok?
    It however does not print anything there. A weird thing is, that if I call directly the php script like <form action="post.php"> all is working fine, so I figure, the data is not correctly transfered to the php Skript??

    Can you help?

  • Adie Jones

    Thank you so very much for this.
    <a href=””>Property finder</a>

  • Manudouble5

    Hi, thanks for this !
    One question: I use a url type box, calling a php file, and I have some charset issues with my mysql data.
    I used to put content="text/html; charset=iso-8859-1" in the html header to solve it
    Works with iframe box, but not with url box

  • We have website development team with Expert in php, drupal, magento developer and asp dot programming. we provides best services for web development and web programming.

  • We have provides SEO Company Limited, web development, web design, search engine marketing, web application programming and best internet marketing services

  • Anonymous

    Url windows doesn't work with cyrillic letters…

  • RAM

    Hi, thanks for this contribution, this very well, now, I want the tinyboxthat opens only be locked from the image (X), which happens if there is some space between the edge of tinybox and the edge of the screen and clicking tinybox closes there any way to avoid this.

    Thank you.

  • adumpaul

    Nice article.

  • Computers are an everyday part of life in the modern world. However, computers require special attention and care in order for them to function properly and to operate safely. Here are some basic guidelines to help you maintain your computer equipment and to keep your equipment functioning for a long time. After all, keeping your equipment running will save you money.

  • Paola Dela Rosa

    I also tried the demo, then downloaded. Everything is not perfect, If you don't want to use tinybox, find other js photo viewers.

  • adumpaul

    Nice work.Good javascript code.

  • JAW

    Is there a way to reference the href field for the URL parameter like you can with GreyBox (uses 'this.href').
    Otherwise, you can't use it with a database driven content. Trying to use it in a XSLT file.

  • JAW

    just figured out a workaround using a built-in CMS property. It still would be nice to have the flexibility, though.

  • How do we change the speed of the mask fading?

  • Scruff

    How do I use{url:'advanced.html',width:300,height:150}) when "advanced.html" is not in the same directory? I have tried url:'../advanced.html' and I have also tried url:'; but I can not seam to get either of them to work. I really need to access the same file from several different directories and would rather not copy the file to each one that needs it. This would make it a pain when i do an update to that file.

    Can anyone help please….Thanks

  • Scruff

    Never mind. The url:'http://www.domain….. does work. My browser was not refreshing properly after I made the changes. Sorry. Awesome script. Thanks.

  • sunil singh

    Thank You 

    The given Information on your blog is very useful.
    Visit :-<a href="">Best seo training </a>

    Different Types of Uggboots
    Shopping Mall Clubs Footwear is one in the apex promulgating yield web-based. 

  • RAM

    Is there any way to use the modal window, or the overlay method, so that the window not closing when clicking outside of it?

  • Anonymous

    Hi thanks for the Lovely script My whole portfolio is based on tinybox. chk it

  • adumpaul

    Nice useful post.Thank you for sharing.

  • Hi, is there a way to make an image load automatically with the page? I mean, like a usual pop up (no click needed)

  • qwerty

    very useful. thanks

  • Louis

    Any support for dragging a window?

  • Conic

    Hello, really great thanks a lot.
    I have only one problem. When a use it to open a picture (big one) the new window show the picture but I can't scrooll it, it scroll the background (the page in fact) but no the picture, and that's what I really need becouse the pictures I have to open are all big.

    I reaaly will apreciate your help!!

    Thanks a lot!!!

  • Dan

    The fade seems to go really slow in IE, is there anyway to disable or speed it up?


  • Wonder how to make this work for IE6. I looked at the previous version code and it appears that you use 'div'.

  • John

    Run the script in the onload of the body.
    <body onload="enter script here">.

    Worked for me.

  • Angel

    How to put shadows (CSS3) on modal dialogs? Because i tried many variants but shadow box in CSS3 not shown (maybe ignore)?

  • Why there is problem in Ajax, Advanced Functions when i tested offline?

  • Mark A

    Can someone please tell me how to stop it from hiding when you click outside the box? Thanks!

  •  I am trying to use TinyBox to display google recaptcha form using javascript api. It isn't working at all. I need to use the fill function but only to fill one element of my form not replace the entire contents of tinybox.

  • ZDXGSHZNSZYK I like it very much!

  • Leekancher

    I need help displaying a simple script for a contact form in tinybox. Can anyone help. Here is the website: 
    It is the sign up form in the upper right hand corner of the page. I am stuck.

  • Scott

    I have found that commenting two lines of the code will stop any form of escaping, including clicking on the mask. The lines are numbers 68 and 69 ("esc" and "hide" lines).

  • Scott

    If you just want to remove the closing action when you click on the mask, line 16 in tinybox.js holds the answer. It has ";". Remove the m.onclick and viola!

  • Mark A

    Thanks Scott!

  • sam

    i need a help to display 1 page which contain a more than  3 phtml page in one tiny box in magento project.
    is it possible?
    and how?
    where should i call it?

  • Erdal Kalayci

    How can i rearrange the code to show the pop-up (image) at the bottom of the html page not at the center.

  • Repaircd

    fine script! thanks
    i use there click image in list

  • Fdc1000

    Wow, nice. Too bad not really modal. Would be nice to have a way to allow closing only when close icon or esc key is selected.  Methods below don't do this.

  • Anonymous

    I think it is nice as it is. I'm thinking of making a wp-plug to install on and

  • Guest

    I just need this code for an example webpage for a class. It is not connected to any server, so I'm offline. For some reason the url won't work, even when I download it and try to open it, it won't work.{url:'advanced.html',width:300,height:150})

  • I would like to thank for this great script. It works great for me and relieve my lot of burden.

  • Jhmutxyw

    this is amazing!

  • Guven

    Hi, I am opening two pop up windows onto each other but it becomes like a puzzle. Do you now how to close the previous one before opening a new one? Thanks.

  • Guven

    I put a button and on its onclick event this function:
    function show() {;{iframe:'..Signup.aspx', boxid:'frameless', width: 500, height: 600,fixed:false,maskopacity: 40});}

    The pop up closes but does not open a new one.

  • Clayton

    Great script. Is there any way to only allow closing of modal window when close button is clicked?

  • Dee Morrison

    I like TinyBox2 a lot but is there a problem, however, in how it handles urls with bookmarks in iFrames, e.g. "foo.html#footnote14"? I'm finding the iFrame popup scrolls randomly instead of positioning itself at the bookmark. Advice would be much appreciated. 

  • Tsulleknun

    How to disable close popup when click out of popup area?.

    Thanks in advance.

  • Perfect windows.Thank you

  • Can't get the window to open over the parent from an iframe, even with taget="_top". No answers to questions…it's like a ghost town around here. zero support.

  • Male Hakim

    This thing saved my life…but further more…i want to be able to make postbacks on it before it disappears…any fix on it

  • Hey!

    Thank you so much for sharing nice and useful information
    about Java Script Drop down Menu.  This
    script code would be very helpful and amazing for web developer and designer…  Thank you so much for sharing with us.

  • Chris Murray

    Zero support? The dude spent hours writing a FREE script. If it is not working for your current project, write your own script or move on to something else…

  •  did you ever figure this out?

  •  thanks for sharing

  • Fdc1000

     Yes, its nice, in fact very nice, the way it is but it lacks true modal features. if you click outside the box it closes, too many accidental closes this way when used in production.

  • i love it so much

  • AlbertMartinez

    Sweet! Thanks a million guys! Awesome things!

  • AlbertMartinez

    here's the way I used mine and it works… 

    <. a href="javascript:"  onclick="{iframe:'http://yoursitename.html&#039;,boxid:'frameless',width:900,height:900,fixed:false,maskid:'bluemask',maskopacity:40})"><img border="0" src="images/contact.png"> a./. >

    Opens up in the center of my window and displays the page. Just like it should. Hope this helps somehow. Cheers guys/gals!

  • chao wang

    xhtml1-transitional.dtd  needed in IE

  • Dan Piparo

     Have you figured this out yet?  I'm having the same issue.

  • Vandai079


    How can I use event click when iframe showed
    it's mean when the Iframe was showed and then I click on that Iframe, it will redirect to another page


  • Rodvelcar

    What happens if my image is 1280px X 1024px and my monitor is 1024px X 768px?? the image will show on the real size, how can i resize the image to fit on the screen

  • Erastus Kariuki

    this is how i do it

    on window load , i get screen size

    var popup_innerWidth;var popup_innerHeight;Event.observe(window,'load',function(){ var screenPageSize = getPageSize(); popup_innerWidth = (screenPageSize[0]); popup_innerHeight = (screenPageSize[1]); popup_innerWidth =  Math.round(90/100 * screenPageSize[0]);//90% width popup_innerHeight =  Math.round(90/100 * screenPageSize[1]);//90% height });

    if u dont use prototype.js ,like i do , test with

    windlow.onload = function()
     var screenPageSize = getPageSize();

    popup_innerWidth = (screenPageSize[0]);
    popup_innerHeight = (screenPageSize[1]);

    popup_innerWidth =  Math.round(90/100 * screenPageSize[0]);//90% width
    popup_innerHeight =  Math.round(90/100 * screenPageSize[1]);//90% heigh

  • WOM_Lance

    Is there anyway to have the popup open without clicking a link of some sort? I have an if statement that if returning false I would like to display the popup. Thanks for any help.

  • Matt

    Your license specifies "You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work)." but I can't see where you have specified attribution.

  • Para utilizar este complemento en un iframe pueden modificar como a continuacion
    En la funcion "show"
    "parent.document.body.appendChild(m);" y "document.body.appendChild(j);"
    "parent.document.body.appendChild(m);" y "parent.document.body.appendChild(j);"
    En la funcion "total"
    Remplazar: "var b=document.body, e=document.documentElement;"
    Por: "var b=parent.document.body, e=parent.document.documentElement;"

    Y no olviden agregar la hoja de estilos "style.css" a la pagina padre que contiene al iframe.

    Por cierto gracias por este complemento y me gustaria preguntar si alguien sabe de algun libro o msdn pero de javascript? gracias

  • Scottgray398

    Attune Infocom provides Website development services
    which can range from developing the simplest static website to dynamic
    website to the most complex web-based internet applications, e-commerce
    website development or social networking websites.

  • Raphel12

    How can I add this script to joomla?

  • NeoArc

    This is the best lightbox plugin I've seen in a long time.

    Just a small suggestion, could you make it possible to have several layers opened at the same time?

  • I like the valuable information you provide in your articles. I will bookmark your weblog and check again here frequently. I’m quite sure I will learn lots of new stuff right here! Good luck for the next!

  • Paks

    I like to open hidden div from this popup which is on same page from where it is called. How can I do that?

  • Andrew Paget

    Is it possible to post a form within the box where only box refresh  not the entire page?