TinyBox JavaScript Popup Box – 3.4KB

AJAX, Javascript 349 responses so far

JavaScript Modal Window Script

Click here for the latest version.

TinyBox is a lightweight and standalone modal window script. At only 3.4KB it doesn’t include any slideshow capabilities built-in but allows for any AJAX or HTML input so the sky is the limit. Future versions will include additional features. It can also be used for images and auto hiding alerts. The popups fade in/out and dynamically size based on the content if enabled. The styling is completely customizable through the simple CSS. I have a couple tutorials and a few scripts I will be posting very soon so check back.

To display a popup box use the following code:

TINY.box.show('advanced.html',1,300,150,1,3);

There is nothing to initialize, just start using the script. The TINY.box.show function takes 6 parameters: the HTML content for the box or the relative path to the AJAX source, a toggle (true/false or 1/0) if the content is via AJAX, the width of the window (use 0 for auto), the height of the window (use 0 for auto), a toggle (true/false or 1/0) to animate the window, and the time in seconds to wait before auto hiding the popup (optional).

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source code.

Update 11/15/2009 – Updated logic to speed up the animation and fix a positioning issue. Slightly dropped the code weight.

Update 11/16/2009 – Fixed issue that occurred when sizing down a box.

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 Michael (see all)

  • 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 :P :)

    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 :D

  • 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 :o)

  • 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. :P

  • 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
  • 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.

  • Michael G

    Hi there,

    Awesome script! Thanks so much.   Quick question – is there a way to put a "loading" gif in the iframe while the page loads, and remove it once the iframe's page has loaded?  The iframe window is white until the page loads, which looks like it's not doing anything if the page it's loading is slow.
    Not sure if it's possible, but thought i'd ask :)

  • Sadickeugene2008

    hi guys! thank u very much for wonderful script! i do want the box to pop up while maintaining other elements of the page in active state! how can i do it!! Please help!!! 

  • Gracie_soo

    for auto hide…can the pop up box show the counter of for seconds  

  • Gracie_soo

    for auto hide…can the pop up box show the count down timer for seconds 

  • http://www.daily1game.com/ Download Games

    Great example, I wanted to make a login form for my website using light box effect.

  • Ravi

    rkkassociatesinfo.com

  • http://twitter.com/upendarnunna upendar.nunna

    yes you can use css image

  • Charles

    Hello,

    Is it possible to make it so the instance doesn't disappear when the user clicks on a submit button or anything clickable inside the box?

    Thanks

  • Yoga

    This blog is
    excellent, I like study your posts. You know, many persons are searching
    around for this information, you could aid them greatly.

    <a href="
    http://fitnessbooksonline.com.au/ccp0-prodshow/hatha-yoga-illustrated-martin-kirk-brooke-boon-daniel-dituro-online-book.html">Yoga</a&gt;

  • Yoga

    I am really
    impressed jointly with your writing skills as neatly as with the formation in
    your blog.
    Yoga

  • Yoga

    This blog is
    excellent, I like study your posts. You know, many persons are searching
    around for this information, you could aid them greatly.

    <a href="
    http://fitnessbooksonline.com.au/ccp0-prodshow/hatha-yoga-illustrated-martin-kirk-brooke-boon-daniel-dituro-online-book.html">Yoga</a&gt;

  • Yoga

    Impressive post. I
    used to be checking constantly this web blog and I am inspired with your blog
    post

    <a href="
    http://fitnessbooksonline.com.au/ccp0-prodshow/hatha-yoga-illustrated-martin-kirk-brooke-boon-daniel-dituro-online-book.html">Yoga</a&gt;

  • Simple Tax Appeals Illinois

    I like
    the valuable info you supply on your articles. I will bookmark your blog and
    test again here regularly.

    <a
    href="http://www.simpletaxappeals.com/">Simple Tax Appeals
    Illinois</a>

  • angel

    Does anyone successful combine tinybox with tinyslider2 ?

  • rk

    oh

  • sky loans

    Excellent and decent post. I have found much informative, what I was
    exactly searching for. Thanks for such post and please keep it up.

    <a href="http://westernsky.usmoneysource.com/">sky loans</a>

  • Nisha

    Can u help me how to prvent the form submission when error mesage occurs

  • Military Boots

    I really like your style of blogpost as I have been able to find here.

    Military Boots

  • http://www.facebook.com/carlo.paglietti Carlo Paglietti

    Help:
    I need to write sometings like this:
    TINY.box.show({url:+lavorazione,post:'txt=',width:750,height:450,opacity:20,topsplit:3
    })
    where lavorazione is a variabile like if.php?value=1
    but I dont' know the correct sintax, can help me?

  • lau

    can you do it?

  • Alam

    I am using the jqplot for my chart, But into the tinybox the jqplot is not working. Does anyone know does i can manage to show jqplot inot the tinybox?

  • Patrizia

    Hi everyone, there's a way in which I can include smarty variables in a tpl page?

    TINY.box.show({iframe:'productquestion/productquestion-form.php?id_product={$smarty.get.id_product|intval}',boxid:'frameless',width:800, height:600, fixed:false,mask:true, animate:true,closejs:function(){closeJS()}})

    Thank you"

  • http://www.iwebxpert.com/ Daisy Bono

    This is very a good feature of javascript not only because of its additional functionality but also it makes a website clean and gives clarity to the users.

  • Vijay

    Hi,
    I am using the TinyBox, while using it hides all the other contents on page while display which is right but there is Flash object on my page which is not getting hide while showing this Tinybox.

    Please suggest.

  • Vijay

    Hi,

    I am using TinyBox in my ASP.net website.

    While displaying the TinyShow, all the contents on the form are getting disabled/hidden which is right but the Flash object on my page is not getting Hidden/disabled it is showing along with TinyBox.

    Please suggest how can i disable/Hide it.

    Thank You.

  • himanshu

    CAN we make it responsive

  • ttarvin

    Is there a way to add a caption to tinybox2 image?

  • atikik

    Thank you. It works great! I love that it doesn't contain any extra fluff or complexity beyond what is necessary.

  • Marcel

    Hello, great things you have here. now i am using the tinybox, but can I also make it fullwidth (100%) or (90%)? Because now percentages does not seem to be supported?

  • bebeb

    Thank you!

  • SUBHASH

    NICE SCRIPT IT WORKS

  • Richard

    This is a really great script – I use it extensively. However, sometimes find that if you are using AJAX to alter the content of a tinybox2, such that the content requires more depth than previously, the box doesn't change size appropriately. An illustration of what I'm talking about is here: http://remote.bottishamvc.org/Tinybox2_Overspill.PNG. Has anyone got the same issue as me? Any pointers would be appreciated!

  • cartsharje

    thanks

    plaese conside my site:<a href="http://www.cartsharje.ir&quot; title="کارت شارژ">کارت شارژ</a>

  • Malin

    Hello Carlo.

    I`m Suggesting you to learn html / php before you are trying to do anything :)