How To Do a CSS PopUp Without Opening a New Window

Friday, October 12th, 2007

Categories: Web Development

RSS Comment Feed


AddThis Social Bookmark Button

Ever wonder how some people can get little CSS PopUp’s without opening an annoying window? I’ll explain how. One of its advantages is that it’s not blocked by blockers and you can place it wherever you like on your page. Apart from the short Javascript file that you don’t even have to look at, it’s quite easy to understand.

Please note that whenever I speak about a blanket, I’m referring to the transparent film that goes over the content to draw attention to the PopUp.

Click Here For The Demo


#blanket {
opacity: 0.65;
z-index: 9001;
#popUpDiv {
z-index: 9002;

What this CSS does is position and style the general elements. The blanket, as discussed earlier, is the translucent color block placed over the content to bring out the popUp. popUpDiv is the name of our popUp div element. It’s important to know that both elements have their position attributes set to absolute. This means they are positioned at certain pixel measurements on your website relative to what object they’re in.

The Javascript File

Click Here To Download the CSSPopUp.js file. Now, the first thing you need to do, is download the Javascript file and put it in a folder you can remember. If you’re curious, open it up, I’ll give a brief overview of what each function does. (Keep in mind I am by no means a Javascript coder, it probably looks a little messy to some pros out there).

  • toggle(div_id) – This simply toggles the inserted div name from being displayed (display:block) to being hidden (display:none).
  • blanket_size(popUpDivVar) – This resizes the blanket to fit the height of the page because there is not height=100% attribute. This also centers the popUp vertically.
  • window_pos(popUpDivVar) – This centers the popUp vertically.
  • popup(windowname) – This function contains the other three to make life simple in the HTML file.


<div id=”blanket” style=”display:none;”></div>
<div id=”popUpDiv” style=”display:none;”>
<a href=”#” onclick=”popup(‘popUpDiv’)”>Click Me To Close</a>
<a href=”#” onclick=”popup(‘popUpDiv’)”>Click Here To Open The Pop Up</a>

The HTML places two your two CSS elements with display being set to none by default. I’ve noticed this is important for some reason.

Using the attribute onclick in our <a> tags, we can call our function: popup(); to do everything we need. It turns the popUp both on and off.

That’s all for now, if you’re having some trouble, click Here For The Demo and feel free to go ahead and grab any code you like.

Bookmark this blog using any bookmark manager!
Subscribe to via RSS

Error. Page cannot be displayed. Please contact your service provider for more details. (14)

Related Posts

Subscribe to this Post

478 Responses to “How To Do a CSS PopUp Without Opening a New Window”

  1. DD Says:

    Hi. Your script is great.

    Q.1 Could you advise on how to change the dimensions of the popUpDiv so that it will sit int he top left of the window, on top of the blanket layer.

    Q.2 Can the popUpDiv scroll?

    Q3. Can one have links in the popUpDiv layer to internal webfiles?

    Thank you in advance :)

  2. Patrick Burt Says:

    Hi DD, thanks for the comment.

    Here are your answers:


    function popup(windowname) {

    change to

    function popup(windowname) {


    add this to popupDiv

    2. The Div can be as long or as short as you want. If you’re looking to have a scrollbar, you’d have to use an iframe.

    3. Absolutely. The CSS Popup isn’t actually a popup, it’s a CSS element that feels like one.

    Wish you the best, let me know if you have any more questions. :)

  3. martin Says:

    Hi there! Thanks you for sharing.

    I have one question:
    In the html that I’m using the CSS popup I need to use a flash banner. The thing is that the blanket doesn’t goes over the flash. So I get the Popup and the flash’s area over the blanket ay the same time.
    Is there a solution for this?

    Thanks again :)

  4. Patrick Burt Says:

    martin, the only solution (to my knowledge) would be to use javascript to swap the innerHTML of a div with the Flash to an image before laying the blanket over. Flash seems to always want to be on top.

  5. Drev Says:

    Hi There! Great Tut.

    One thing: huge images (1000px or above wide for example) doesn`t show up on the center of website, but little on the right. What should i change to set them absolutly center to width of the window?

  6. Patrick Burt Says:

    Hi Drev,

    Thanks for the comment. I would not have 1000px pictures because people with the common resolution of 1024×768 would have a side scrollbar (over ~980px is a bad idea)

    But if you’re set on doing this, there’s this line:
    window_width=window_width/2-150;//150 is half popup’s width
    Did you change 150 to 500?

  7. Drev Says:

    God damn it! That was a fast reply :)

    But no, it doesnt work:(
    Sorry that i will paste link, but its a good example:
    (click on whatever thumbnails). All of them appears at center of the window. With your script, images are on the right, like it set them according to the first pixel of an image, not from middle (?).

  8. Patrick Burt Says:

    Could you throw me a link with your page?

  9. Drev Says:

    Hi Patrick, i sent Email to You yesterday, but You didnt respond, maybe junkmail? :)

  10. Patrick Burt Says:

    I downloaded the site to my computer. I changed two lines and it worked:

    popUpDiv_height=blanket_height/2-291;//150 is half popup’s height
    window_width=window_width/2-550;//150 is half popup’s width

    Hope that helps. :) (And yeah, it was in my junk mail)

  11. Chris Says:

    Hello. I tried to add it onto my page, but I get a “blanket has no properties” error message in firefox and an “object required” error message in IE7..

    How do I get it to find blanket?


  12. Patrick Burt Says:

    Hi Chris, thanks for the comment.

    Did you make sure that

    is on the page? Did you also make sure that you set the ID as blanket, and not the class?

  13. Chris Says:

    Yeaa.. i figured it out..
    I was lazy and copy and pasted your html portion onto my page.. when I did it, the quotes came out as a different character.. They are (”) when I copied it and they are supposed to be (“).. So that’s what threw it off..

    oh yea.. and I’ve been looking for a way to do this for a little while and I couldn’t find and tutorials on it. This helped a lot!


  14. Patrick Burt Says:

    Ah cheers, glad to hear everything worked out. :)

  15. ted simmons Says:

    hey there,

    This is a great function by the way. But I’m having an issue in IE6. The blanket div seems to be outside of the popup div. It works great in IE7, FF and Safari, but IE6 looks screwy. It’s showing up to the left of the popup div. Do you have any ideas around this?

    thank you.

  16. Patrick Burt Says:

    Hi Ted,

    Could you send me a link to the page?

  17. Dustin Frampton Says:

    Hi There,

    Very nice css popup. I was wondering if there is a way to make this popup on entering a webpage rather than having to click on a link for it to popup.


  18. Patrick Burt Says:

    Hi Dustin,

    Simply remove the display:none from the DIV containers. :) You can always use something like scriptaculous for a fade-in effect if you like. :)

  19. Rich Says:

    is there anyway to load one of these popups automatically? for example, when you go to the home page there will be a popup video that will play… they should be able to close the popup and when the video stops it should close. any ideas?

  20. Patrick Burt Says:

    Hi Rich,

    Simply remove the display:none from the DIV containers (blanket and popup)

  21. Jaime Says:

    Hi, I’m using Visual Studio 2008, but I work in an office where they only have Windows 2k servers so I’m stuck using .net 2.0. What I am seeing in VS 2008 an error for

    opacity: 0.65;

    It says CSS 2.1 does not contain those properties or recognize those properties… Please tell me that it’s VS… If I launched it would it work anyway I guess is what I’m asking.

  22. Patrick Burt Says:

    Hi Jaime,

    It wouldn’t validate, but it would work. Filter=IE, Opacity = everything else. I’d suggest opening the file in Notepad, adding it, and then oepning it up in VS2008.

  23. Charlotte Says:

    Hi there, I think your pop up is great – I’ve been wondering how to achieve this for a while now! Just one question, is it possible to have more than one on a page? For instance, 10 links with 10 different pop ups.

    Thank you.

  24. Patrick Burt Says:

    Hi Charlotte,

    Absolutely. There’s two ways you can do this: Have multiple uniquely ID’ed CSS containers with different or use one CSS container and use Javascript to switch up the content.

  25. Charlotte Says:

    Great, I’ll try the uniquely ID’ed CC containers. Thanks for your help!

  26. zaydeh Says:

    very impressed with your program, pariculary its simplicity and size.
    am using iframes to display PDF files, and your program works great in IE7. In FF, however, the popup window opens nicely, but the PDF does not display. Any ideas on correcting this?

  27. Patrick Burt Says:

    Hi zaydeh. That seems to me like something that would be impossible, given that this is a browser issue.

    This is an area I’m unfamiliar with, but what about toying with Macromedia Flash Paper? You could convert the PDF to a compatible format, and throw the Flash code on your popup?

  28. Jonathan Says:

    Thank you very much for the script! I’m not very fluent in javascript, but this code was simple to use and I actually learned alot from this script. I didn’t think my javascript image gallery would work inside the div tags, but it works flawlessly!

    My only question is if its possible to add a fade effect for both the blanket and pop up window on open and close.

    Also, is it possible to have more than one link on the same page open up a different window?
    The site is a kitchen design website, and one link is for photos, the other is cad drawings. So the will both contain different material. Only way I know to do it is to rename the “popUpDiv” to “popUpDiv2″ and that would require a whole new “csspopup.js” for the different variable name.

    Thanks again, very simple to use!

  29. Jonathan Says:

    Looks like I spoke too soon. :(

    The pop up works flawlessly with firefox… but unfortunately there are people who still use IE out there. Hard to believe, I know… but I guess some just don’t know of the beauty that is firefox :)

    The problem in IE is the blanket does not cover the page, but shifts everything over half the page…
    Do you mind taking a look at the source and telling me what’s wrong?

    Try it in IE.

    Thanks Patrick!!!

  30. Patrick Burt Says:

    Hi Jonathan,

    For the second comment, the bit that says: “div id=”blanket” style=”display:none”, etc. should not be in a table cell. But instead, it should be called right after your BODY tag.

    For different popups, you’d have to have a different ID name, the link would just call the different name, for example:
    div id=”lentzPopUp” and then the link: onclick=”popup(‘lentzPopUp’)”

  31. Jonathan Says:


    Thanks for the quick reply.

    If I may bother you for one more question:

    I now have two different popups working on the same page (four actually), however I’m having a hard time figuring out how to get another that is larger to center.

    In csspopup.js I’m defining the position, however the variable is “popUpDiv”

    Seeing as how I have more than one popup, one id is “Photos” and one is “TwentyTwenty”

    Not thinking about it, I never changed the line in csspopup.js from:

    popUpDiv_height=blanket_height/2-210; // half the popup height


    Photos_height=blanket_height/2-210; // half the popup height

    I thought since I changed the div ID that I would have to, but it worked flawlessly.

    Well, that’s fine considering it’s popup height is infact 420… however another popup’s size is 656 x 465

    Do I just add another line stating:

    TwentyTwenty_height=blanket_height/2-328; // half the popup height

  32. ewan Says:


    This is great but I have a problem in FF where when I close with a button on the page it causes the underlying page to reload. It does not do this in IE 6.

    I am using Close to close.

    i have put an alert on the page body onload so I can confirm it happens.

    – ewan

  33. ewan Says:

    sorry that should be

    “when I close with a button on the popup it causes the underlying page to reload. It does not do this in IE 6.”

  34. Patrick Burt Says:

    Jonathan, you’d have to jump in and get your hands dirty with some Javascript, maybe put a toggle in the function?

    Ewan, got a link? This isn’t normal.

  35. ewan Says:

    Sorry no link as it is not internet facing :( It does not do a reload on your demo page so there is something else I have that is calling the page to be reloaded. Its pretty odd as IE does not do it. Worse than that it ends up hitting the database.

    The page that the div pop up is on is in a frame – is it possible that drawing over the whole window causes the frameset to have its children reload?

  36. ewan Says:

    Right may have narrowed the prblem down to the buttons – they seem to cause the reload.

    My popup div has 4 buttons at the bottom each one performing some javascript action before calling popup(‘popupDiv’) and all four cause the reload in FF. Change the buttons to links with onclick() handles and the reload does not happen.


    replaced with Close.

    Doh – the solution for buttons in FF is have the onclick() return false which i suppose I should have known but as it was not a form I assumed I did not need it.


  37. ewan Says:

    sigh – html is being stripped in the above reply.

  38. Patrick Burt Says:

    Ahhh, sounds good. Thanks for the tip ewan. ;)

  39. Lynda Says:

    I am trying to get your code to work on a site that I am working on, but I am obviously doing something wrong. Can you please help?

  40. Patrick Burt Says:

    Hi Lynda,

    Can you post a link to the site in question?

  41. Lynda Says:

    sorry i thought it put it up since it asked for it. :)

  42. Patrick Burt Says:

    Hi Lynda, your blanket should come right after your body tag.:)

  43. Meg Says:

    Hi Patrick,
    Thanks for the code, it’s really spiffy! I also don’t have much javascript background and this was something really cool I happened to stumble on that I could actually implement. I was wondering the same thing as Charlotte, but after trying to use new ids (blanket01, popUpDiv01, etc), the popup no longer pops up. Is there something in the javascript I should change as well? (And make 01, 02, 03, etc versions of…???)

  44. Patrick Burt Says:

    Hi Meg, blanket won’t need to change. All you would have to do is replace instances of “popUpDiv”

  45. Paul Says:

    Can you tell me how to have the popup appear in the center of the window. Currently the popup appears in the center of the page. This doesn’t work so well because my page is long and the popup appears too far down.

  46. Patrick Burt Says:

    Hi Paul, in the JS file, you can adjust the height of your box. This may be the problem. :)

  47. Gay Says:

    Hi Paul, I’ve done a multipopup version that works great in IE, okish in Firefox (but I just noticed I need to extend the popup boxes) but doesnt work as it should in Safari – the popup text appears in the same place as where the original link is and the box cant be closed (I guess because the blanket is over top).

    Do you have any suggestions for getting it to work in Safari (3.1.1) – screenshot of the safari problem is at

  48. Gay Says:

    whoops, did I say Paul? I meant Patrick

  49. Patrick Burt Says:

    It’s okay. :) What happens if you start throwing on high z-order attributes on the popup divs?

  50. Gay Says:

    High as in what, Patrick – not sure how high you want me to try. (its not me with Safari but a friend of mine so its not that easy to test lots of things)

    As an aside I did have this problem myself in IE when I first tried it and had the CSS ID declarations as totally separate instances eg.

    #popUpDiv { blah}
    #popUpDivHow {blah} etc

    but this was fixed when I set them as one combined declaration eg

    #popUpDiv, #popUpDivHow {blah}

    not sure why.

  51. Patrick Burt Says:

    High as in the highest number on the page.
    One thing you might want to consider is placing the code for the DIV right after the blanket.

  52. George Buckingham Says:

    Hi there!

    Thanks for the great script – has worked wonders for me! However, the pop seems to be appearing in the middle of the page, not the browser window. For example on a really long page, the pop up won’t be seen without scrolling down. Do you know if there is anyway way to fix this at all?

    Many Thanks!

  53. George Buckingham Says:

    Following on from my last comment, a way to position the box in the midle of the page and then define xxx pixels from the top would also be fine?

    Many Thanks!

  54. Meg Says:

    Hi again, Patrick — thanks for the tip! I’ve duplicated the popUpDiv01 within the head to create popupDiv02, and in the body I have something like:

    Click Me To Close

    Click Me To Close

    The first thumbnail works properly, but when the second is clicked, the large image appears (seemingly under the blanket??) and pushes the three other thumbnails down the page. The “click to close” is unclickable. I noted that this only occured when I had two popUpDiv’s specified in the head, no matter what it was named. If I only had 02 up there, and only called 02 in the body, it’d still work…

    I’m not sure about the implications of such an observation, but I was hoping you could provide some enlightment! Thanks so, so much, and I apologize for any noob-ish confusion on my part x_x!

  55. Meg Says:

    Oh…I didn’t realize the html would work. Sorry!

    Click Me To Close

    Click Me To Close


  56. Patrick Burt Says:

    Do you have a link to the site in question Meg? The HTML isn’t coming through.

  57. Jeff Says:

    Maybe I’m just missing something obvious, but in IE6, any image I place in the popup div doesn’t appear–only text.

    Is this an expected behavior?

  58. Patrick Burt Says:

    Hi Jeff,

    Place the div id=”blanket” and popups right after the body tag.

  59. Neeta Says:

    Hi Patrick,

    Thank you very much for the nice CSS popup. this i was searching since somany days i dint find the good one. but this helped me allot. if you dont mind i used this in one of my sites.

    Many thanks

  60. Patrick Burt Says:

    Hi Neeta, my pleasure. Glad it worked out for ya. :)

  61. Jeff Says:

    Thanks for the response.

    (Looks like the problem is actually some sort of conflict with the sleight.js png replacement script for IE. The images work just fine as long as the aren’t .png format.)

    Thanks for the cool popup solution.

  62. John Says:

    I used the code to create a popup menu. I added negative values margin-left and margin-top to position the menu. Works perfect in FF and Opera. IE (6 & 7) however, are a different story.

    Page is here:

    Perhaps I should nix the margin-left/margin-top and change position in the javascript, but I’m not a javascript expert either.

    Any advice?

  63. Patrick Burt Says:

    Have you tried absolute positioning John? Margins combined with widths/heights are always a little iffy.

  64. Neeta Says:

    Hi Patrick,

    Thanks for the response. hope you remember me :)

    I have one problem in my site. hope you can help me out with this.

    This is the site where i used you csspopup to show one flash and one secured page in the popup. i am not a very good designer, please dont mind when you see the site.

    The problem is i have a small flash on the index page. popup is properly opening on the flash, if the browser is reduced to small size and when i click on the link “click to call us” it opens the popup and if i try to scroll to see the full popup, the popup flickers with the flash behind. this behaviour in IE and in firefox flash is overlaping the popup.

    Can you please tell me some solution for it.


  65. Patrick Burt Says:

    Hi Neeta,

    There are issues with Flash always wanting to be on the highest layer of your website. Unless there’s a workaround I don’t know, the thing I’ve done before is swap the Flash out for an image before putting a popup on top.

  66. Neeta Says:

    Thank you for the reply Patrick!!

  67. Vic Says:

    Hi, Patrick:

    I am currently designing my personal site right now. After reading some articles regarding accessibility, finding your script is a god sent. However, I am still a beginner to the web world. Please excuse my ignorance. Can you please let me know how I can add a swf into the popUpDiv?

    I’ve been scratching my head till that point. Hope you can help me.


  68. Patrick Burt Says:

    Hi Vic,

    The best I can do without giving you a lesson JAvascript is to redirect you to SWFObject. What you need to do is swap in the Flash when the DIV container flips on.

  69. Whit Says:

    Hi Patrick,

    First off, thanks so much for posting this (I went looking for this very solution and this is nearly perfect for what I’m trying to do), and for being so helpful to all of us rookies. :)

    This setup works beautifully for the site I’m working on ( , click on “JG Band” to use the script) with one exception: it seems to be limited to one such pop-up link per page. As you can see, I need to use it for several such links/popups on a single page. Are you aware of a simple way to do this without creating a separate JScript for every link? I gathered that Meg might be doing something similar, but I wasn’t quite following the suggested solution.

    Also, one tweak that you might find helpful: I placed a transparent GIF in the blanket DIV with 100% dimensions, then placed another toggle link around that. So now you can click anywhere outside the popup in order to get rid of it. Much quicker than finding a small link with your mouse.

  70. Patrick Burt Says:

    You woudln’t need another Javascript file. All you would need is another uniquely named DIV ID and to change the popupDiv to that new name. What you could even do is use CLASSES to style the box, and ID’s only to uniquely tag the DIV container to open/close it, know what I mean?

    Good idea for the tweak!

  71. Whit Says:

    Okay, let me give that some thought. I got the idea that the phrase ‘popUpDiv’ had to be used as the DIV ID because it’s referenced so many times in the code (I tried replacing that in the HTML with a new name, which didn’t work). There must be something I’m missing in the logic there.

    Thanks for the response!

  72. Whit Says:

    A-HA! Took me a few minutes, but I figured it out. Thanks again!

  73. Patrick Burt Says:

    No problem Whit. :)

  74. Nathan Says:

    Hello Patrick!

    The way this works is awesome but I was wondering does it
    automatically resize the pop-up window to fit the say an image?
    It would be nice if it did. If you wouldn’t mind showing me how
    to go about doing this it would really be helpful!



  75. Patrick Burt Says:

    You mean to constantly be resize depending on whatever’s in it? That would take a fair bit of Javascript Nathan.

    If you want to change the size of the pop-up window in general (and not have it resize dynamically based on the content). You can do that in the CSS and on two lines in the Javascript.

  76. Nathan Says:

    Yeah that is what I mean :) Did not realize it would take that much sorry :) . The images I am using are of various sizes so I would want it to dynamically resize them but since that may be to difficult I may stick with what I already have. Here is a link to what I have done (remember I only did the images, the text, and the pop-ups. It is an old site I am trying to revamp and convince the company to redesign). TNJMurray

  77. Patrick Burt Says:

    Nathan, that would take some serious Javascripting. Or a different solution all together. If being time-efficient is your thing, I’d consider cropping that last picture, or shrinking it to the height of the others.

  78. Nathan Says:

    Would there be any way that I could set a separate size for the other image? They don’t want to lose any of the picture


  79. Patrick Burt Says:

    Hi Nathan,

    Unfortunately for the example Javascript and CSS I provided, I made things as simple as can be so that it’s easy to use. The separate sizing would mean a decent amount of Javascript and tinkering.

  80. Nathan Says:

    No problem thanks for your help. BTW I love your site! It is great! I am trying to learn how to use css and other design elements for the computer and your site is really helpful!

    Thanks again!


  81. Peter Says:

    Hi, I have spent almost an entire day getting my personal website set up and running with your css and JavaScript files, and all looks great in Firefox. But in IE when I click on the box to hide the popUpDiv IE says Error on page, and does nothing. The opacity appears to have worked, clicking back takes me back two web pages. In Dreamweaver it says that opacity and filter are unsupported properties, is it crashing here, are there any alternatives (apart from telling everyone to use a decent browser :-) )



  82. Patrick Burt Says:

    Hi Peter, make sure the CSS elements I provided are located RIGHT after the body tag starts.

  83. Peter Says:

    Wow what a quick reply! Tried your suggestion but it still does the same


  84. Patrick Burt Says:

    Can you post a link to the site in question?

  85. Peter Says:

  86. Patrick Burt Says:

    Hi Peter, I viewed source on your site. Bring the blanket and popup divs before your table’s code first starts.

  87. Peter Says:

    Thanks Patrick, sorry to be a pain, but could you elaborate on that.

  88. Patrick Burt Says:

    div id=”blanket” and div=”popupX”… all that body.. should be right after BODY which starts right after HEAD ends. (I can’t put greater than and smaller than’s because it messes up comments)
    I’m talking about HTML code.

  89. Peter Says:

    Hi Patrick,

    Sorry, my mistake… I modified your JavaScript file so I could pass width and height of the image to both the blanket and popup, allowing me to center the image on the screen. I just forgot to pass the width and height to the first onClick! Thanks for your help, it’s a wicked component.

  90. dan Says:

    That is so freaken awesome!
    Been looking for this!
    Thanks and keep up the good work!

  91. Mike Says:

    Patrick, I have been using this script for months now on a few pages. I’m old and brain damaged, and slow, but once I figured out how to get in there and change stuff to do what I wanted people think I’m a bleeding genius… Thank you!

    Example: Driving two separate iFrames at:
    and all the different Radar popups at

    I think I disregarded the blanket effects, don’t remember off hand just how, but I pulled them in to eliminate the visible effect… anyway it presents a super display, and is very effective!

    Thanks again! And if you’ve got any suggestions I’d appreciate it.



  92. Andres Says:

    Well I can’t believe I finally found what I wanted by typing the correct words on Goooogle!!! The script is EXACTLY what I need and I’ve tested it OK on Firefox 2+3, Netscape 9, IE6+7 and Safari.

    Only thing I don’t like is that the popup is shown in the middle of the entire page, not the middle of the page’s visible area. When the link to show your pop is on the top of a large page, it will appear far below the current page area and the user shall have to scroll in order to locate the popup.

    To fix this behaviour and open the popup in the [b]middle of the window[/b], popUpDiv_height should be set to this value: window.innerHeight/2-150; (where 150 is the popup height)

    Also, those weird french quotes should be replaced by straight quotes, but that’s simply a detail. Script is great, thanks!!

  93. Andres Says:

    I already found a bug on my correction code: window.innerHeight is not accepted by IE in sctrict mode.

    To get the current browser window size, this function should be used:

  94. Viktor Says:

    Hi, first script is really great…
    I have one problem with displaying blanket in IE7. Blanket covers only window height but not whole scroll height. In FF it is OK. This is link (you click on ‘Rezultati’)…

    Thank you, greetings from Croatia. :)

  95. Patrick Burt Says:

    Hi Viktor, I’m not entirely sure, did you change any code?

  96. Viktor Says:

    No I didn’t… but one question, in js file function

    popup(windowname) {

    do I have to change this variable windowname?

  97. dracoon Says:

    Hi. I also have this problem. I haven’t changed the code.

    When popping up a window, the blanket only covers till the bottom of the window height, not the scroll height. So if you scroll down further, the blanket is gone.

    Open:, shrink the window, so you have a scrollbar, then click on “Regisztralok” at the top. Now popup window appears, and blanket appears behind it. But if you scroll down, the blanket does not present at the bottom of the page. Tried in FF3 and in IE7. Also tried to play with the parameters, but still no success.

    I noticed, if I skip the .parentnode from the code, the blanket presents, but on resize, it messes up the window. (I call windowpos on onresize event, to keep the popup window in place all the time).

    I tried not to set the blanket height in the js, but in the css file, but the height 100% still only the height of the actual window, not the whole scrollable area.

    Any advice?

  98. dracoon Says:

    Actually, don’t see my given example, as I’m working on it and changed it already. :-) But the problem still exists. I’ve changed the blanket height to my page’s div height, but it’s still not perfect, because if I open it on a large screen, the bottom is not covered (after my page ended).

  99. Patrick Burt Says:

    dracoon, it looks like you’ve got everything to auto-resize. It’s working on my end with FF3. How’s it working on your end?

  100. dracoon Says:

    Almost perfect.

    var frameheight = document.getElementById(‘frame’).offsetHeight;
    if (frameheight > blanket_height) { = frameheight + ‘px’;}
    else { = blanket_height + ‘px’;}

    I fixed it by using the height of the frame too to calculate the the required blanket size. Now, the only problem is that I use an equal column techique that adds 20000 padding -20000 margin to my frame, and mozilla 2.x only calculates the padding, not the margin to the offsetheight parameter. So, in mozilla 2.x, the blanket becomes very long, but in other browsers I tried (FF3, IE7, Chrome) it’s fine.

  101. Leon Says:

    Hallo Patrick,

    I am from Holland, so my English isn’t very wel ;) ..

    I use your script and I like it but it doesn’t work like I would. The blanket-div isn’t opening 100% width, but (I think) for 75%.

    How can I make this correctly to work?


  102. Patrick Burt Says:

    Dracoon, that’s awesome!

    Leon, make sure the blanket-div is called and closed right after the body tag.

  103. Viktor Says:

    I played with parameters and code and I think i know where is problem… In header must be tag, else with any other tag (as ) in IE blanket would not cover entire scroll page height…

  104. Viktor Says:

    I played with parameters and code and I think i know where is problem… In header must be DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “ tag, else with any other tag (as DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”) in IE blanket would not cover entire scroll page height…

  105. Patrick Burt Says:

    The Tag should be right after body tag opens, Viktor.

  106. Mike Says:

    Hi Patrick, After ages of searching google I came across your blog. I really like the idea of this pop-up however I want it to popup when the page opens. To test the code, I copied the source code from your demo and removed the display:none from the div containers. this is what I get: You will notice that for some reason the blanket turns into a thin bar instead of a blanket. If you click on ‘Click Here To Open The Pop Up’ after closing the pop up it works fine.

    Please tell me how to fix it so that the blanket is a blanket instead of a thin bar at the top?

    kind regard


  107. Mike Says:

    sorry, the above link doesn’t work, try


  108. Patrick Burt Says:

    Mike, instead of removing display:none, run the popup function on your page. :) The popup function resizes the blanket.

  109. chasebadkids Says:

    Hey guys, great script, I was wondering how I might go about getting this to load when a page loads ( like header.php ) and how I might go about setting it to load only once / 24 hours ( cookies) ? THanks!

  110. chasebadkids Says:

    Hey, Im sorry for asking hte same question, I ssearched on this site to see if anyone asked what i did and it didnt find anything, now that i actually read each comment, i see its answered,

    Your resolution to getting it to load on page load was to remove display:none from both the divs,

    I did this, but the blanket doesnt load, just the overlay, any idea why? Id still like to have help figuring out how to make this not load everything the sites loaded, but instead once every 24 hours or so?

  111. chasebadkids Says:

    sorry, p.s. here’s my link

  112. chasebadkids Says:

    wow, i just read the comments directly above mine (I NEED COFFEE TODAY) and noticed that hes asking the same exact thing as me, can you still help me in using cookies with this? ive never used cookies but realize this is how I need to accomplish this, plus how do i go about “running the popup function on my page” ?

  113. Patrick Burt Says:

    You need to insert functions so the scripts can set/read cookies:

    window.onload = imafunction;
    function imafunction() {
    if (getCookie(‘myCookieName’)==’hello’) {popup(‘divname’);}

  114. chasebadkids Says:

    Thanks pat, Ill try looking into that today and get back to you, im still not sure what you meant as far as “runnning the popup function on my page” ( Since im having it popup on the page load )

  115. chasebadkids Says:

    if someone would offer to do this for me, I will pay you via paypal :-) Im lost :-X

  116. Mike Says:

    Thanks for the help Patrick.

    I’m too trying to use cookies with it but I haven’t got a clue how to do it, javascript is over my head. Would be great if you could add a bit of code to set cookies. cheers

  117. Mike Says:

    Here’s how to do it, just copy and paste the code:

    function createCookie(name,value,days) {
    if (days) {
    var date = new Date();
    var expires = “; expires=”+date.toGMTString();
    else var expires = “”;
    document.cookie = name+”=”+value+expires+”; path=/”;

    function readCookie(name) {
    var nameEQ = name + “=”;
    var ca = document.cookie.split(‘;’);
    for(var i=0;i

    document.write(‘Click Me To Close‘);
    createCookie(‘wroteIt’, ‘wroteIt’, 1);

  118. Mike Says:

    ignore the above the blog software didn’t like the code, to get the code visit

  119. Mike Says:

    Hi Pat, I was testing your code across other browsers, I noticed that when you use netscape, the blanket is black and has no opacity. I narrowed it down to the javascript being the problem. How can the script be changed to make the blanket transparent and grey?



  120. chasebadkids Says:

    hey mike, I went ahead and tryed using your “” code and it had a couple “errored characters” that didnt display ( I assumed they were quotation marks, replaced em) and couldnt get the code to work.

    Look at the source to see what Im using. Thanks!

  121. Mike Says:

    Hi, here’s a page where i’ve used it

    have a lookat the code. I’ll check the code you used tonight. I noticed you don’t have html tags at the beggining and end, not sure if this makes a difference.

  122. chasebadkids Says:

    Thanks Mike, I’m at work right now and cant really tweak around with my sites code, by using your code is it still possible to have opacity?

  123. chasebadkids Says:

    any help really would be apprecaited :-(

  124. Patrick Burt Says:

    Are these CSS lines still there:
    opacity: 0.65;

  125. chasebadkids Says:

    Okay, I used your exact code, put it at the top of my header.php file, and it ended up makign my entire site stack really weird, any idea why?

  126. Rhay Says:

    Hi sir, I’m currently creating a function which shows pictures, sir can you give me an idea of how I can add a previous and next function to it using your code.. Im just a youngster here.. tnx

  127. Whit Says:

    Hey Patrick,

    I was blissfully using your script setup to pop-in windows on my client’s site until I found out that the blanket isn’t covering the entire window in IE 6 – it only extends 200px or so from the left edge. As far as I can tell, the only difference between my setup and yours is that I’m using a class for the popUpDiv instead of an ID (this was necessary to have multiple pop-ins on the same page). Here’s my installation (relevant links on the right):


    Any idea what’s going on here? FWIW, I got the same result before moving your “IE 5″ filter directly into the CSS block, which seems to work fine in FF, Safari and IE, btw (in other words, it doesn’t seem to need the if/then statement).

  128. Patrick Burt Says:

    Whit, you need to place “Blanket” at the top of your HTML, right after you open the body tag.

  129. Whit Says:

    AHHH! I had no idea. :) Awesome, thanks so much Patrick.

  130. chasebadkids Says:

    Hey Im still not able to figure this out…. could someone please help me. thanks!

  131. Milan Says:

    Hi Patrick,

    First of all I must say thank your for a great script. Also, I am very surprised with your fast answers to people’s questions. Keep on :)

    I hope my question isn’t hard enough. I am convinced that I am so close to solution but I couldn’t find it even with reading all of earlier comments..
    so on site
    i have small pictures..when I click on first two popup is great, just where I want it..but when I click on last one with orange border it drops me back to upper position..I want that popup to be also in position like upper once, without “jumping” around..

    I hope I was clear enough,
    Looking forward to your answer.

  132. sourabh Says:

    can u please answer that when we open “Click here to open the pop up” in new tab the same link appears.
    Is there is any way that when we right click on it then in the new tab “click me to close” will appear.

  133. Rachel Says:


    I was able to use your codes and am happy to say that it worked in the website am doing for a friend since I’m searching for a nice and better way to make those images pop up.

    But here’s my concern:

    On the website that I’m doing, there are about 33 images that hopefully pops up when it is clicked. i’ve used your codes and the thing is that the image that pops up is the first image. for example i clicked on image 14, the image that shows up would always be image one and vice versa.

  134. Kevin Says:

    Rachel -
    The most likely problem is that you’re calling the same div for all 33 images…you’ll have to create unique divs for each image (or, as was mentioned above, change the div ID to a CLASS, then all you have to do is create the unique IDs for the content) …hope that helps. There’s some more on this in previous questions, have a look if you’re still confused

  135. Francis Newman Says:

    Hi Patrick

    My first time with your script. I think (know!!) I must be missing something. On the attached page the popUpDiv is visible. I don’t understand how the javascript file is linked.

    As I say, I am missing something fundamental. Please put me out of my misery :-)

  136. Patrick Burt Says:

    You have to fix the quotes in your sources, view your source and look at the line with div id=”blanket” to know what i’m saying, the double quotes are curly quotes.

  137. Francis Newman Says:

    Thanks Pat. I had copied and pasted. But now sorted that bit. Still maybe some questions to come though I want to try and sort it myself first. Thanks again :-)

  138. Francis Newman Says:

    Hi Pat

    some things I can’t sort out.

    Probably not directly related to your script but maybe you can help me

    Why is my text in the pink colour when I have defined text for the popUpDiv as #686868

    Why do I have a line space above my click on link (after “established by”)

    Why is my popUpDiv background not white.

    How do I move the position of the Pop Up div? In the javascript?

    Grateful for any help.

  139. Francis Newman Says:

    Sorted out the pink text :-) Just being dense on that one!

  140. Francis Newman Says:

    Hi Pat

    Ignore all before. I’ve sorted it all now except for positioning. Do I look to the javascript for that? All very simple so far once I got my brain in gear :-)

  141. Patrick Burt Says:

    CSS, and there’s a chunk in the javascript where it sets the position based on the height/width of the div.

  142. Francis Newman Says:

    Hi Pat

    Thanks for all your speedy help. I have everything working fine now in all browsers on Mac and Win in except in the dreaded IE6 (what a surprise!) where the blanket is being cut off about 80% horizontally across the wrapper div in which it is placed. As I say, works fine in everything else.

    Any ideas?

  143. Patrick Burt Says:

    Take the blanket outside of your wrapper.

  144. Francis Newman Says:

    Thanks for that as always Pat. I thought I’d tried that but obviously not as that has fixed that problem. However in both IE6 and 7 the wrapper top margin value now changes on activating the popUpDiv. I know IE has some funny ideas about margins but can’t work this one out.

  145. Jon Says:

    I’m trying to get this working on this page HERE.

    So far, I only have it wired for the first B&W thumbnail in the list shown on that page. When I click on the thumbnail, the pop-up image works, but the blanket doesn’t fill the screen, and the image is too far down and to the right. Any guidance would be greatly appreciated. (Thanks for the tutorial. Excellent feature.)

  146. Claudio Sergiacomo Says:

    Hello Patrick , I’m doing a web site right now but I’m still lost on how to pisition the Div box in the middle of the screen with specific top margin pixels. I red althese posts and I’m totally confused about where that might be :the Java Script or the CSS file. I have several Div IDs created since I have several popups to open and they do open and close as I want but they just appears in the same vertical position wher I have the thumbnails images that trigger the popup.

    Please let me know what lines of code should I add or modify.

  147. Hieu Van Says:

    Hello Patrick,
    I am making website using cmsmadesimple so in the content of the page,i insert the javascript and css in the literal tag and outside that i place the html code like above.It works but the pop up window closes unexpectedly after 1 second and go to the index page.
    I tried to figure why it happened and i looked at the javascript code and there is nothing relating to time.I just think is it because of z-index or something and can you explain for me about the number you choose for z-index?
    Thanks heaps and merry christmas.

  148. Ramya Says:


    Thanks for your script. It works perfectly in firefox and in IE7. It doesnt look good in IE 6 :( I havent changed anything in your code other than the “window_width=window_width/2-350;”. In IE6 opacity is not working and also the popup image is not center aligned. it is at the left side of the browser. could you please tell me how to fix this issue.


  149. jKuren Says:


    Awesome script, I must say.

    But there’s one con: I have dozens of popups of different sizes. Is there anyway that

    window_width=window_width/2-150;//150 is half popup’s width
    popUpDiv_height=blanket_height/2-150; //150 is half popup’s height

    could get the popup’s half sizes automatically?


  150. Patrick Burt Says:

    You’d have to rewrite the script a bit. Possibly pulling out each of their height using .height

  151. jKuren Says:

    I tried that. Then I thought that maybe it’s pulling up “px” with it, so I did a replace(). And then the entire popup didn’t show at all… I’m no JavaScript coder at all. :)

  152. ADNAN Says:


    Awesome Code, I’m sure you’ve heard that before :)

    Is there any way to have the pop up appear on the position where the page is without going back to the top and stay at the page position after viewing the pop up?

    Sorry I have a limited knowledge of JavaScript. I played around with the vertical alignment but it sill resets the page to the top. Otherwise I would have tried to make changes myself. Any help would be greatly appreciated.

    Thank you,


  153. Don Sandler Says:

    Your suggestions on how to display various types of files were helpful and appreciated. Now, I have a problem vertically positioning the popup. In you example, the popup is near the top of the screen, but in the current web page i am working with, the popup is located in the lower portion of the screen and extends beyond the lower boundary. The entire popup can be seen, but scrolling is required. I am using and iframe to display an htm file. I could really use your help. Thanks.

  154. Leanne Priestley Says:

    I’m trying to get it so the window opens dead center on any screen, any idea on how I would do this?

  155. Ron Says:

    Dear Patrick,

    I am joining the thanking choir. I am a classical pianist, and with your code I was able to have my youtube demo videos appear as centered popups. I am only an amateur, so when you have the time, could you give us some pointers regarding how to combine scriptaculous for the fade in and fade out effects? Thanks!

  156. Colin Says:

    Another huge thanks, this is fantastic. I have just finished setting up my online portfolio and this worked great for my animation clips. Feel free to check it out!

  157. Jeremy Says:


    Thank you for sharing your findings. This saved me huge amounts of time in not having to write something like this. A++

  158. Alistair Says:

    Fantastic snippet of code! Exactly what I was looking for. Thanks.

  159. Michiel Akker Says:

    Hi patrick,

    First of all, i’d really like you’re code.
    It works fine. I’ve read some tips of this website.

    I’ve got one problem, i’ve you have time, please check my website.
    In the menu under The Band, i’ve used you’re code.

    My only problem is that when you click on one of the pictures my css on the site changes.
    I’m guessing that i’ve done something wrong with you’re code.

    Can you take a look at my site ?

    I’m sorry for my bad english, i’m from holland.
    So it’s not my preferd language.


  160. Gableguy Says:

    Wonderful job! I love this script and css combo.

    I know this question has been asked before, but I didn’t find a reply.

    Could you tell us how to get a popup to appear in the center of the browser window? Right now the popup appears in the middle of the site. Hope this makes sense. Thanks.

  161. Gableguy Says:

    Just thought of something to add to my previous post.

    How can we keep from going to the top of the website when a popup is opened?

    Many Thanks.

  162. Patrick Burt Says:

    I don’t have the resources to support this. You’ll have to play with the code.

  163. Jangam Says:


    First of all I should thank you for your code.

    I have got one problem. In IE6 when I open the pop up it is not hiding the combo boxes I have in the window. It is hiding checkboxes , radio buttons and Images too, only problem is with combo boxes. I have 4 to 5 combo boxes in the window and I would like to hide those boxes as well. It works fine in firefox. Please let me know how to fix this issue.
    Infact the combo box is overlapping the popup div.
    Please suggest me a solution.

    Thank you once again

  164. Lisa Says:

    Love the script, it’s what I’ve been searching for, for hours.

    I am trying to basically click on a few different thumbnails and then have a bigger version of the image popup over the previous page. With the bigger version of the image showing with the background being translucent. Can you please show us how this can be done. It would be most appreciated.


  165. Colleen Says:

    This is great but i don’t want it to run on click i want it to go onload … I tried putting the onload call in the body tag but doesn’t seem to work … can you help?

  166. Nathaniel Says:

    Hi Patrick! Thank you for sharing this with the world. This script is exactly what I was looking for, and its working great.

    This may have already been answered (apologies, I didn’t read all of the many comments) but in response to Martin’s question ( about Flash being used on page and in the pop-up, I have a solution.

    Apparently, you have to add a parameter to your embed method of the Flash that tells the browser to render the flash window as part of the page, and not as a window on top of the page. I know that sounds a bit technical, but the fix is quite easy.

    To your Flash embed code, just make sure you add this parameter if its not already there: wmode=”opaque” (or, alternately, wmode=”transparent” — I’m still not clear on the different between those two values, but they both seem to get the job done).

    So, for example, if you are using the old school object embed, do this:

    Note that I added the value in both a param tag, and in the embed tag.

    I think FLash now has this option available when you publish an SWF from your .FLA, so you could probbably make sure its included that way too.

    Email me if any further clarification is needed. This problem was plaguing me for a while, both with this script and with other DHTML elements – the Flash always appeared above everything. Adding this parameter/value fixes that.

  167. Nathaniel Says:

    Sorry, just reazlied my html example got eaten. Here it is, where [ ] equals

    [object height="300" width="400" ]
    [param name="allowFullScreen" value="true" /]
    [param name="wmode" value="opaque" /]
    [param name="movie" value=" "/]

  168. Nathaniel Says:

    Arg. Sorry. Patrick, please feel free to delete or edit the crappy code comment.

    «object height=”300″ width=”400″»

    «param name=”allowFullScreen” value=”true”»

    «param name=”wmode” value=”opaque”»

    «param name=”movie” value=” “/»

    «embed src= “” height=”300″ width=”400″ allowFullScreen=”true” wmode=”opaque” /»


  169. Michael Lavocah Says:

    Thanks for this cool script.
    Couple of suggestions to the readers (mostly picked up in various ways above)
    To avoid a page refresh, add return false to the closing line:

    «a href=“” onclick=“popup(‘popUpDiv’); return false”»Click Me To Close«/a»

    To position the popup relative to the insertion point:
    – remove the positioning lines in the Javascript functions
    – add top and left to the CSS for the PopUp
    – enclose the calling code in a relatively positioned div:
    «div style=“position:relative”»

    The way to embed a flash (youtube) movie suggested by youtube is not valid xhtml. A valid method ( is

    «object type=“application/x-shockwave-flash” width=“425px” height=“344px” data=“” wmode=“opaque”»
    «param name=“movie” value=“” /»

    where I’ve added the wmode=“opaque” to the object tag. It’s not needed in the param tag.


  170. Jacob Says:

    Great script!

    Is there a way to pass a value from a loop in ASP?…

    Have a dynamic list of thumbnail which upon click should pass a filename og open the big pix.

    something like this:

    but I can’t get the variable filename via request.querystring into the popup….

    How do I do that???

    Thanks in advance :-)

  171. jacob Says:

    something like this:
    a href =’?Filename=’

    but I can’t get the variable filename via request.querystring into the popup….

    How do I do that???

    Thanks in advance

  172. Marty Says:

    Hi patrick,

    this one has me stumped. whenever i click the link to open the popup, the popup just flashes for about a sec and then disappears..

    the divs are already placed immediately after the BODY tag… this happens for both ff and ie. any idea what might be causing this?

  173. Patrick Burt Says:

    Marty, do a search and replace for the function.. popupDiv, I believe. it might be used twice.

  174. Carpx Says:

    Awesome script.
    I got it working in a second and now I was wondering how to use the popup to Show users information.
    What I need is a way to click on a link an pass a GET var with user ID. I know that the click to open does not reload the page, so I changed the oiginal “#” link for: #” onclick=”popup(‘popUpDiv’)”>. On this I reload the same page and allow the User ID to pass via GET, but when the Page reloads the popup appears and disappears in the blink of an eye.

    Any ideas on how to get the popup to stay till i hit the close link?
    Thanks from Argentina!

  175. Les Says:

    Awesome script but need to extend it some. I have multiple popups on one page and they are all different sizes. Since the cspopup.js has fixed numbers for widths, only one of my popups center properly.

    I have found a cheap and dirty way of fixing this by modifying the script so I can pass the width and height to the javascript functions but isn’t there a better way to use javascript to automatically detect the actual size of the popup div?

  176. raj Says:

    This is a really good code thanks man I was trying to this for months…

  177. Adam Says:

    Hey i’m a little new to this and I don’t know what to do with the js file? should i just upload it to the same directory as the html file?

  178. raj Says:

    Hi Patrick,
    Nice script but a small question, the blank is not covering for entire screen in IE 8but it works fine in all other browsers? any suggestion?

  179. Rvzamora Says:

    Wonderfull script, I was able to make it display automatically after I updated a record in a database. However it will not close when I click on the close link. What I’m I missing?

  180. JUKSBADGUY Says:

    Thanks this helps.

  181. JUKSBADGUY Says:

    Adam Says:

    July 9th, 2009 at 4:48 pm
    Hey i’m a little new to this and I don’t know what to do with the js file? should i just upload it to the same directory as the html file?

    Yes! you can upload it to the same directory.

  182. loy Says:


    i’m using this on my website now and i noticed that when you click and it pops up, when you resize the window the popup isn’t aligned in the center. can anyone fix that?

    thanks and i really appreciate this simple yet effective css code.

  183. willakawill Says:

    This function removes the need to put style display attributes in the html if you prefer to keep your css completely separate:

    function toggle(layer) {
    var elem, vis;
    if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( layer );
    else if( document.all ) // this is the way old msie versions work
    elem = document.all[layer];
    else if( document.layers ) // this is the way nn4 works
    elem = document.layers[layer];

    vis =; // if the style.display value is blank we try to figure it out here
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?’block’:'none’;

    vis.display = (vis.display==”||vis.display==’block’)?’none’:'block’;

  184. Bhavana Says:

    Thanks Patrick for awesome code.

    I just have one question:
    How do I resize the blanket height and width? For some reason it just covers the window size. I have horizontal and vertical scroll bars on my screens and need the blanket allover.

    Thanks again!


  185. Nitin Uchil Says:

    Hi Patrick:

    Thanks for the wonderful script.

    I have a question. I have modified your script to prevent the background window from having scrolling when the pop-up occurs, like so:

    function togglePopup(div_id) {
    var el = document.getElementById(div_id);
    if ( == ‘none’ ) { = ‘block’;
    document.body.scroll = “no”; //IE = “hidden”; //FFX
    } else { = ‘none’; = “visible”; //FFX
    document.body.scroll=”yes”; //IE

    This works great on Firefox. However on IE, the scrolling correctly dissapears when pop-up, but does not appear back on Close.

    document.body.scroll works correctly if independently placed as Close/Open links on IE.

    Any help would be greatly appreciated.


  186. James Says:


    I’m probably being impatient, as I am sure the answer is somewhere in the comments!

    I have the code working nicely, but I want the popup larger. This I can do, but then the top left corner still originates at the same point. I want the top left to sit, well, more top and left, effectively centering the popup to the site window, regardless of its size (within reasonable boundaries, of course).

    Let’s say I have a 500×500 pop-up. How do I center this to the site?

    Using Firefox 3.

    Thanks for the script – it took me ages to find such a good tutorial!

  187. Fred Says:

    Does anyone know of a way to get this to appear on top of form elements, namely drop downs? In IE6 the blanket covers everything but my drop downs, which you can still interact with.

  188. Sean Zoega Says:

    Great bit of code, many thanks for that…my coding is definately not up to doing it myself. One big question though has anybody managed a workaround with IE8..the problem is that IE8 doesnt support position:absolute (I know, dont you just love microsoft) so the #blanket tends to be off to the left of the screen

  189. Aljosha Says:

    That’s a great and easy to use tool, thank you!
    But beside of all glory there is a bug:
    #popUpDiv {
    z-index: 9002;

    There is no closing curly bracket…

  190. Chris J Says:

    This is a nice little bit of script.

    I have added it to site running Joomla (Open Source Content Management System) and with a little tweaking here and there I got it to work loading a manufacturers catalogue inside an iframe which now sits nicely over our site when the link is clicked.

    However, there is now a delay in page load as naturally the browser loads the iframe contents as well even though they are not visible… Is there anyway you know of to make the iframe only load on the display of your neat little popup??

  191. Steve Says:

    Awesome! Simply awesome! Do you know any other answer to the issue that Paul brought up without having to define height and width and all that?

    Paul said, “Can you tell me how to have the popup appear in the center of the window. Currently the popup appears in the center of the page. This doesn’t work so well because my page is long and the popup appears too far down.thanks”

    I am having this issue in Firefox but in IE it seems fine. Thanks so much!

  192. David Cunniffe Says:

    This is a great piece of script. Thank you very much. I have a question which I haven’t found the answer to in the comments above. I am using this script to have a popup appear which displays videos of my work. The links for the videos are at down the page a bit so you have to scroll to find the, but when I click the popup, the page in the background scrolls back to the top of the page. Is there any way that I can have the popup appear over the link without the scrolling being reset in the background? Thanks

  193. David Cunniffe Says:

    Also, forgot to mention in my post above, that (like Steve) I would like to have the popup appear in the centre of the window rather than the centre of the page. If there is a way to set this in the code. Thanks

  194. David Cunniffe Says:

    OK, I have figured out how to stop the page from reloading when you click the popup link and also when you click the close popup link. Can anybody please direct me how to centre the popup in the window (not the page) both vertically and horizontally (so it remains in the exact centre when page is resized either way). Thanks

  195. Peter Says:


    Try changing csspopup.js script blanket_size function line:

    popUpDiv_height=blanket_height/2-150;//150 is half popup’s height


    popUpDiv_height=viewportheight/2-150;//150 is half popup’s height

    Hope that helps.

  196. Peter Says:

    Patrick! Your script is great. Thanks for your post.

    Also, I have one question: Does anybody know how to make the pop up div to load a new page into it? Basically, I would like the pop up window to run a server side vb script and show user the result. The only way to start a server side script after the web page has been loaded is to reload the content. I don’t want the whole page to be reloaded, just the pop up div.

    Thanks for any ideas.

  197. Chris J Says:

    Hi Peter…
    Will an ‘Iframe’ suit your needs?
    I managed to get the script to load an Iframe (see above) my only ‘issue’ it has increased the page load, but that is due to the page loaded not this great script.

    Hope that helps.

  198. Chris J Says:

    Thought I may as well give you some IFrame code
    (You will need to adjust the height and width of your Iframe as below to suit your ‘page’ that is to load isdie the frame and you may have to modify the .js script height and width as other people have mentioned above.)

    Sorry – Your browser does not support iframes.

  199. Chris J Says:

    thought as much.. the code was stripped from my post… never mind… look up ‘Iframe’ in google try the ‘w3 schools’ site.

  200. Quen Says:

    I am having same problem as others how do i get the content from the css popup to automatically center itself in the browser because atm if i resize my browser its location doesnt auto-center in the window.

  201. Chris J Says:

    Hi quen
    You need to modify the js code and change the height and width to be half the height width of your object or iframe.

    look for this line in the .js (around line 25) >>

    popUpDiv_height=blanket_height/2-400;//150 is half popup’s height

    and this (around line 43) >>

    var popUpDiv = document.getElementById(popUpDivVar);
    window_width=window_width/2-390;//150 is half popup’s width = window_width + ‘px’;

    Then change the numbers in red to the popus height and width.

    hope that helps. I had to fiddle around to get it to work but it did.

  202. Les Says:

    Nice script and I am using it in many places. But there is only one problem, vertical centering on long documents.

    When the entire document fits in the browser window, vertical centering works great, but when the document is a long one and you scroll way down the page and click a link to open the cssPopup, you have to scroll way up to the top just to see the popup. This is a problem mainly in firefox 3.

    Does anyone have any tips for vertically centering in the browser and not just in the document?

  203. Janice Says:

    Hi, I really would like to use this code to allow users on my website to open an html with a streaming radio player on it. Currently my hyperlink for the player just opens a new window with the player on it which I hate. I don’t really understand where to put the codes you listed on my web page. I understand where to put the CSS portion (inbetween my style tags) but I do not understand where to put the html tags you’ve listed. As well, where, in the html tags you’ve listed, where do I put the page I’m linking to? So, anotherwords, can you please walk me through this step by step because I feel like a complete idiot. Please reply via email to my email address so I do not have to keep coming back here to check if you’ve replied. That would be greatly appreciated.

  204. Peter Says:

    Chris J: thanks for your suggestion but I’m afraid it won’t work for me. The Iframe load the content on the web page start, not on the pop up div display. I need the content to be loaded up at the pop up div display.

  205. Peter Says:

    David, Quen and Les:
    I posted a solution for you but it still awaits for moderation.
    Please change the .js script line 26 blanket_height to viewportheight
    I hope that helps.

  206. Chris J Says:

    Shame… that’s similar to my problem. the additional ‘iframe’ page is loading into the div ready for display and therefore causing slower page loading.
    I hope someone finds a way to modify the script it to Popup first and then load the content rather than other way.

    Anyone?? :)

  207. Mohideen Says:

    Hi Patrick,
    Sorry to trouble you! I have gone through all your comments but still the ‘blanket’ div is not 100% in width in IE6(everything works perfectly in FF). I have made the div right after the start of tag as you have suggested, also the opacity property isn’t working, you can check the link below (This is a huge file so just search the the keyword “blanket”)


  208. niki Says:

    Hi :)

    I also appreciate the script, and it is working well for me…

    I have one question. Once my popup is open with an image in it, I’m wondering if it is possible to have a few links (within the popup) to other images, and have them targeted to appear in the same popup? I’m trying to avoid someone opening and closing too many times.


  209. JoAnne Says:

    Hi Patrick.

    Thanks so much for this. It has been a tremendous help with the website I am building. I appreciate your willingness to share with folks. I have a question for ya about this site I’m working on. I am having some issues with how the css is rendering on IE. (Go ‘ol aberrant IE). I’ve been working on this for days and haven’t come up with a solution yet.

    The site is

    The little mini music player- when you click on a nav link on the left hand side of the folder, instead of the pop up window going on top of everything, the mini player still appears on top of the pop up window. For example, if you click on RBB Bio, a window pops up but the mini player sits right on top of it. I have played with positioning and z-index with no luck.

    I appreciate any insight you could give me. Thanks for you time!


  210. Bart Says:

    Great mini tutorial, I love the idea of doing popups that way.

    Guess I could use a library for these things but I like to understand how things work.

    I added this feature on a small website I am working on and its working fine, just had two problems.

    The first was a bit difficult but I found the solution, it seems the Javascript that computes the size of the blanket won’t work on every browser so you can use this instead to retrieve the total page height/width:

    if( window.innerHeight && window.scrollMaxY ) {
    pageWidth = window.innerWidth + window.scrollMaxX;
    pageHeight = window.innerHeight + window.scrollMaxY;
    //All but Explorer Mac
    else if( document.body.scrollHeight > document.body.offsetHeight ) {
    pageWidth = document.body.scrollWidth;
    pageHeight = document.body.scrollHeight;
    // works in Explorer 6 Strict, Mozilla (not FF) and Safari
    else {
    pageWidth = document.body.offsetWidth + document.body.offsetLeft;
    pageHeight = document.body.offsetHeight + document.body.offsetTop;

    I found the solution here:

    My second problem is apparently if I scroll all the way down and trigger the popup the focus stays at the bottom of the page instead of going to the “popup” even though I added el.focus() on the toggle function. I haven’t found a solution for this yet but I will post here as soon as I find it.

    Again, nice tutorial!

  211. chris j Says:

    @ JoAnne
    Have you tried altering the order of your source code? Also, I notice you are using a ‘Flash’ based media player… I don’t think you can make anything ‘cover’ or appear over flash.

    hope that helps.

  212. JoAnne Says:

    hi chris.

    thanks so much for responding to me! this is very helpful. didn’t know that about flash. what’s weird is that is works fine on safari and ff for the mac. i’m not sure i understand what you mean about altering the order of the code..?

    thanks again.

  213. Chris J Says:

    Hi JoAnne
    What I mean by ‘altering the order of the code’ is:
    In your pages HTML (source code) the media player is listed last as the page loads… As it is further down the page than your other content is read last as the page is built in the browser. To be honest I doubt in this case that moving it will make a lot of difference but it’s worth a try. If it does solve the issue you can CSS can be used to position it where you would like on the page ‘visually’ although it is actually listed higher in the code. Sadly IE is the most common broswer but also the worst.
    I hope that makes some sense…

  214. JoAnne Says:

    thanks for the quick reply chris! ok, i gotcha. what you’re saying makes perfect sense. i’ll try playing with it and see what happens. curse microsoft and their silly, little most-commonly-used browser… :)


  215. Tom Says:

    I have a page that scrolls with about 50 product listings and want to use this for a form to “review items” for each particular product.

    However, if I scroll down to the bottom of the page and click the button the popup shows up at the top of the page and can not be seen since I am looking at a product at the bottom of the page. It works great if I am looking at a product at the top of the page.

    Is there anyway to get this to have the popup show up adjusting to where you scroll on the browser?


  216. Tom Says:

    I have same problem as Jacob. I have multiple product listings and want to pass the product ID to the window to operate on that particular product.

    When I try to pass a variable, it shows the one that is set for the first product. (I have review buttons on about 30 products and want to be able to review each one specifically using this)

    Does this mean I need to dyanmically create several CSS elements?

  217. Peter Says:

    I’ve been working some issues under IE6 so I thought some of you could use it…

    1/ Issue with blanket not covering whole window:
    Add the following two lines to window_pos function just before the line containing var popUpDiv = document.getElementById…

    var blanket = document.getElementById(‘blanket’); = window_width + ‘px’;

    2/ Issue with combo boxes appearing on top of the blanket and pop-up window:
    This is a common-know issue with IE6. Type ‘IE6 z-index bug’ for various solutions.
    For my hidding the combo box in just before showing up the blanket worked well.

    I hope that helps for some of you.

  218. Lester Says:

    Hi, great script!

    Just wondering, is there a way to have the window pop up next to a link I clicked, instead of a set position? I’m trying to implement a “view map” link so Google Maps popup. Can this be done?

  219. Rouel Says:

    Hi! This script is really amazing!

    I just have a question though; for the popup, I set it so that an iframe loads within the popup (I created a separate html file with the iframe and then linked to that file in the part. However, when you click on the link to toggle the popup, the actual iframe html page loads (in a different tab) rather than in the popup. How do I fix this?

  220. Rouel Says:

    Yikes, I didn’t know the comment box would recognize html. But yeah, I linked to the html file containing the iframe in the code, hoping that it would appear in the popup part, but instead it load on its own page. How do i fix this?

  221. bushra Says:

    hi i am using the same code .my parent page contains a drop down and when i click on that link of popUpDiv the parent page gets overlapped by the popup but the drop downs appear on the popup to make the dropdowns overlapped by the popup?

  222. bushra Says:

    Hi peter can u plz elaborate ur solution about z-index bug because i am also facing the same problem

  223. Oscar G Says:

    Worked like a charm.. PS. your demo link shouldn’t popup into a new window.. ;0]

  224. TheN2S Says:

    Im trying to center the popups on my screen.. but they popup at different positions depending on my browser’s dimensions. Can anyone figure out how to center WIDTH only.. I have it positioned at the moment so that the popup is 200px from the top of the page.


  225. tixier.m Says:

    Excellent script, thank you very much :)

    I was looking to do the same thing but with the popup always centered according to the user’s vertical scroll position. Thus, I’ve modified the “blanket_size()” function to do so and it seems to work well (even with IE 5.5 :)

    function blanket_size(popUpDivVar) {
    if (typeof window.innerWidth != ‘undefined’) {
    viewportheight = window.innerHeight;
    } else {
    viewportheight = document.documentElement.clientHeight;

    if(document.body.scrollTop > 0){
    // For IE 5.5
    bdy_ref = document.body;
    bdy_ref = document.body.parentNode;

    if ((viewportheight > bdy_ref.scrollHeight) && (viewportheight > bdy_ref.clientHeight)) {
    blanket_height = viewportheight;
    } else {
    if (bdy_ref.clientHeight > bdy_ref.scrollHeight) {
    blanket_height = bdy_ref.clientHeight;
    } else {
    blanket_height = bdy_ref.scrollHeight;
    var blanket = document.getElementById(‘blanket’); = blanket_height + ‘px’;
    var popUpDiv = document.getElementById(popUpDivVar);
    popUpDiv_height = screen.availHeight/2-350;//350 is the popup’s height = (popUpDiv_height + bdy_ref.scrollTop) + ‘px’;


    Maybe someone can found this useful :)

  226. Gary Says:

    How can I add a scrollbar to the popup window. Note, I do not know anything Javascript coding. Thanks for your help!

  227. Gary Says:

    disregard previous post, I figured it out…

  228. akhi Says:

    Hi martin

    i f you need to put flash banner on the back of your blanket , you just type flash parameters wmode transparent

  229. justin Says:

    first, i think patrick is no longer responding to comments…

    so my second part is open to anyone and everyone…

    i’m using this popup for a contact form. when the form is submitted, i have another popup appear, confirming success. then you close the success popup (which also closes the form popup).

    but because of the blanket toggle, the blanket disappears when the success popup appears. i want the blanket to remain until i close the success popup.

    any ideas?

  230. Tricia Says:

    Hi Patrick,

    Thanks for the script. It works fine on the web im working on. Im having a trouble on how to change the position of the close button im using to the right side of the pop up instead of the top left.


  231. Tony Says:

    any way to do an onload rather onlick? How would I do that with your existing code? Not to good with code. Any help would be appreciated.

  232. John White Says:

    I want the popup to display when the page loads. I have removed the display:none and now the blanket doesnt appear at all and the popup div appears in the top left of the screen.

    Can you offer any help?

    Many thanks

  233. John M. Says:

    Just two quick questions from previous posts: 1. Did Janice get an answer on how to load an HTML file in the popup? 2. Did Niki get an answer on if it is possible to have links (within the popup) to other images, and have them targeted to appear in the same popup?

    Thanks folks!

  234. Barry Hutchison Says:

    This is a fantastic script, but I’ve come across a problem when I create multiple popups.

    Basically, when I click the link to load the popups they open fine. If, however, someone doesn’t use the “Close this window” button and tries to click a previous link and open a popup they’ve already looked at, they can’t, because the others have loaded on top of it.

    Now, I kind of knew that was there after testing myself, but told myself everyone would click the “close” button after reading each window. I sent the link to two friends to test, though, and they both came back reporting the problem with the links.

    Is there any way of having popup 1 (for example) close when I click the link to open popup 2?

    You can see the site in progress at

    Thanks for any help you can offer!

  235. Rob Says:

    This is a great script. Thank you so much for sharing and for your replies above. I was able to get it working just the way I want to open an overlay on top of a page displaying another site within an iframe. Worked great! And the other guy’s tip about making it so you can click the blanket to close it was fantastic! I initially had a problem with IE but then I realized I didn’t have the right doc type at the top. Make sure you have:

    Also to click the blanket to close use:

    You can view my sample at on my green cleaning products website at by clicking “air cleaners” on the left menu or at the bottom.

  236. Rob Says:

    Well my code didn’t display above but you can see all my code on that page above.

  237. How to create a Popup with CSS and Javascript | WebDesign & Such Says:

    [...] last thing.. the original code for this was found here. I made some edits to make it work for my application. Share and [...]

  238. dej Says:

    thanks for this smart script

    Did someone succeeded using classes to display different images?
    I sure not, and I have grid of thumbnails (>500) so I think adding different IDs for all of them is silly


  239. Neha Says:


    Very nice script !! Thanks for sharing.

    Can someone tell me that how can I use this Script without clicking on any button ? I want it to be used when somebody enters my website.
    At the same time i have flash in center of the home page. Flash overlaps the pop up and pop up is not visible. How can I get rid of this ?

    Thanks in advance !

  240. Laura Says:


    I have a quick question. I wanted to send you my code if that was possible, so you can take a look at where I’m going wrong. Tried using the code above, which is amazing, btw. I can’t seem to make it work, though. :o

    email: laura at applei dot ph

    Thanks in advance! :)


  241. john Says:

    Hi, love this script, however i am having some small problems with it.

    I am using it as a iframe holder to a login script, i would like there to be no blanket but cant find a way of turning it off, and no matter what i do with the re-sizing it, it remains at its default size.

    I know i am probaby doing something wrong, and its probably something simple, but it is not really infuriating :)


  242. Steve Says:

    Hi there, great script but am having a problem, the popup is being displayed at the bottom right of the screen rather than the middle of the screen. I haven’t changed any of the code so what could be the problem here?
    Hope you can help me.
    Many thanks.

  243. Sam Says:


    Thanks for this great code! All is working successfully, however I would like to position the popup div at the top of the page. Adding top:0px; to the css doesn’t have any effect. Any ideas why this wouldn’t work?



  244. Sam Says:

    In response to my own question and to hopefully help some others, here is why the popup is not being centered on the page. I thought I had left the code unmodified, this is not the case. I changed the size of the popup div, which required 2 values to be changed in the .js file. Look for popUpDiv_height=blanket_height and window_width=window_width in the .js file. The default values are set to 150, which is 1/2 the size of the originally coded div. Just set these to 1/2 of the changed div size and voila, works like a charm. Hope that made sense, it’s late and I’ve been at this for too long! lol

    Thanks again for the great code!


  245. Steve Says:

    Does it make any difference to the screen resolution then?
    Thank you. Steve

  246. xenia Says:

    I’ve been looking for something like this for days. I’m using it to create a calendar with popup events on the dates. I made a separate Css page for the #popUpDiv container scripts so that they can be individually numbered by month and date. It looks and works awesome. Great script, Thanks!

  247. shawn Says:

    i need to the same thing but how do i make it automatic when a page load ,that the pup up come up

  248. shawn Says:

    some one please snd me and answer to my email addrees how can i make this pop automatic pop up when my home page load

  249. element101 Says:

    sir, can u help me with my problem? i want to pass a php variable to popup function. ex. popup(‘popUpDiv’,$row[subject_id]), how can i pass that variable to popup function, when i try to pass that, it becomes error, and i want to retrieve that as php variable again. this want i want to do. when i click edit link the popup will show with the designated subject id,subject code and subject description to edit.. i hope you will help me with my problem. thnx. pls email me.

  250. izluks Says:

    How tu make this popup without link? I mean popup open automatickly…

  251. Gene Says:


    Could you email me a sample of how I modify the content of the popup? For example having an image in it or other html code? I’m a newbie at this stuff.

  252. Bart Says:

    Thanks for the example!

  253. Alexander Says:

    Dear Patrick, thanks for this article and other content on your site.

    I found that creating of multiple instances of the css-popup with unique ID’s, it’s best to just put the style inside the DIV tag. Especially on pages that are generated dynamically.

  254. Matt Says:

    Is it possible to have a scroll bar in the pop up if the content exceeds the size of the boundaries?

  255. Taylor Says:

    Hi there! Great script! Love it…

    I’m having a slight issue with it though in IE8 – darn internet explorer – always the issue!

    There are a few issues which you can view in IE but not FF – some I can correct once i do some research – but my main issue that when the pop up comes up, in IE the background under the pop up, goes completely to the background-color, and you cannot see the faded website – but you can in FF.

    The website is – NOTE: I have this on a body onload, and my php is recording IP in database so that this will pop up once only!

  256. emmel Says:

    hi, i am developing a billing system using php…hmmm, i planned that when i input the amount paid(in a textbox) i wanted it in a form of popup using css instead of new window. can u help me? i tried ur code shown here, but my problem is, i cannot move the popupdiv to the left side. please help me…tnx

  257. Suneth Says:

    can u pls say is it support to Crome

  258. Stroobach Web & ICT Says:

    I’ve put the html code below on a website to close the css-pop-up by clicking anywhere. This is great for making a (one-time only) announcement to your visitors.


    [x] close

  259. Stroobach Web & ICT Says:

    Hmm.. can’t post HTML here..
    In addition to my previous post, I added onclick=”popup(‘popUpDiv’)” to the blanket and popup divs.

  260. liz Says:

    Thanks for the tut, client requested ‘i-Phone friendly’ gallery and this solved the solution well.

  261. liz Says:

    Err duh, solved the problem well … =P

  262. mike Says:

    I was able to adjust the positioning of my popup, however the blanket disappears now. Any suggestsions?

  263. mike Says:

    Ne’rmind, figured it out

  264. tom Says:

    I want to also have the CSS popup appear automatically when the page is loaded. Do I just play around with the onload ability? Has anyone done this?

  265. Drag n Drop in domino application | Samrat Roy Says:

    [...] Click Here To Find Out How To Do This [...]

  266. Refurbished HP Laptops Says:

    I don’t found any solution for Body Onload here… pls help, my programming skills getting rotten…

  267. Simmy Says:

    code much appreciated, thanks

  268. Valdez V. Says:

    Just what I needed.

    Thanks and hails from Mexico!

  269. Image Popup without opening a new window using css « My start to web development Says:

    [...] Image Popup without opening a new window using css As I said in my previous post I don’t like the window feel and look of an image pop up, there are so many cool pop ups which don’t have that look. So today I was searching to find something simple and nice.  I came across this nicely written article : How To Do a CSS PopUp Without Opening a New Window [...]

  270. theo Says:

    hey patrick great stuff. any ideas why once closing the popup, the sound from the video keeps playing, if closed before video is completed?

  271. anemone Says:

    Hi! Cool script, and needed! I have a very long page. The link is in the middle of the page, and when clicked, it takes in the top of the page, but the popup is in the middle. So you have to scroll down very long to find the popup. Is there anything I can do? It would be cool if the link wouldn’t move the visitor to the top of the page.

  272. quixote Says:

    I was able to start this pop-over with the onload=”" syntax. This way, it will pop up automatically when you load the page.
    But… is there a way to make it self closing? let’s say, after 5 or 10 seconds?
    I tried to call the same function with this clause, but didn’t work:
    what I think is that I called it again, but it remains until you close it manually.
    Can it be done?
    I’ve looked a lot all over, but can’t find an answer.
    Thanks in advance to anyone than cah help.

  273. Girish Says:

    I am trying to implement something similar to what you have done.
    Here’s my scenario.
    There is a hidden div in my page (which i toggle to visible on click of a button)
    Inside this hidden div i have placed another div which contains some info i want to display as a pop up.
    When the button is clicked, I want the background to become translucent as you’ve done.
    the problem I encounter is that when I try to do what you’ve done, even the hidden div comes under the “blanket”, and thus I am not able to separately see the popup.
    Please help!

  274. kcoolyea Says:

    Thanks very much for this Pop-up effect. Unfortunately, this is not effective for keeping the pop-up in “view” of the user. Since it is CENTERED to the “SCROLL” of the page, long pages place the pop-up out of view.

    Can this be modified to simply place it at an exact location in relation to the screen size? Or just having it appear at the top of the web page?

    I am not quite sure how to do this, so any advice would be great!

    Thanks again.

  275. panoet Says:

    Hi, there are a lot tips like this! But nothing as simple as yours. Very thanks for this useful post :)

  276. ato Says:

    hy I’m a little confused. I know I haven’t worked yet with css, and i’m really novie but please somebody could tell me where to copy the css part exactly? and where to put the html code to make it work. I’m using dreamweaver CS5. thank you in forward, regards ato

  277. BrianR Says:

    to have centered vertically, change lines:

    popUpDiv_height=blanket_height/2-150;//150 is half popup’s height = popUpDiv_height + ‘px’;


    var y = 0;
    if (self.innerHeight)
    y = self.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight)
    y = document.documentElement.clientHeight;
    else if (document.body)
    y = document.body.clientHeight;

    myHeight = (y / 2) – (300 / 2); //300 is popup height = myHeight + ‘px’;

  278. Michael Says:

    Thanks a lot Pat. You are a legend

  279. KevinK. Says:

    Is there a way to have the blanket and/or popUpDiv fade in smoothly? I tried using a jquery fade effect, but was having some issues making the the pop up and fade work together. Thanks. Great Tutorial.

  280. James Says:

    Great script! Thanks!

    I’m just trying to figure out how to dynamically resize the blanket, when someone resizes the window (downwards).

  281. Richard Says:

    Hi James, I would also like to know…. I am building a mysql/php site and need the blanket to resize to over 8000px … I have tried with getting the height of the container div but then the next problem exists putting this into php variable …. hmmmm

    If your site is html/javascript then I have a tip. After the Body tag ……. You can get the height of that container and resize the blanket….

  282. Richard Says:

    I found a way to make it work James. :)

  283. Paul Says:


    Thanks for your great scripting.

    I am trying to use it on my portfolio, the only problem is that my whole website is contained on one big horizontal scrolling page.

    I’m not used to Javascript but I noticed that the coding was using the vertical scrolling position.
    Do you know what I can replace in the code so that it takes in consideration the horizontal scrolling instead ? I don’t have vertical scrolling at all.

    Thanks a lot.

  284. James Says:

    I got the blanket to automatically resize to stay 100%… the main difference I think was I needed to put 100% height in the body properties before putting 100% height in the blanket properties.

    body {

  285. Joane Says:

    Great code!
    Can I also use it to make a popup image gallery? Like: when you click an image, the popup opens and within that popup you can see more images, using ‘previous’ and ‘next’ buttons/links. I don’t know if it’s possible to switch between pictures within a div.

  286. Richard Says:

    Yes Joane you can…. Basically you must almost everything these guys wrote :) … Just use normal divs…

  287. Joane Says:

    Thanks Richard, I’ll just give it a try!

  288. Dipen Says:

    Thanx yaar

  289. Melville Says:

    Thanks for posting this! Makes it so easy to add popups to websites for us non-techie folks. You’re awesome Mr. Burt.

  290. Srinivasu Devu Says:

    Excellent job. Perfectly it is working. Hats off.

  291. Mark Says:

    Excellent post. Many thanks.

  292. kathleen Says:

    Awesome code! Thanks for publishing it!

  293. Himself12794 Says:

    is there any way to fix the popup in a permanent position in the middle of the page? command position: fixed works, but puts the popup down at the bottom halfway hidden by the bottom of the page

  294. Kendra Smith Says:

    Hi, I am using your awesome popup script for a YouTube video which I set to autoplay when opened. Your code is working great but I was wondering if you have any advice for me regarding my video – it keeps playing even after I click the close button, but only in IE. In Firefox when I click the close button it also stops the video. In IE you can still hear the sound from the video playing in the background even though the div that the video is in is no longer visible. Do you know how I might be able to solve this?

  295. Cris Says:


    How can you get the popup window to follow you as you scroll? Or, at the very least, to pop up in the center of the window no matter how far down the page you’ve scrolled?

    Right now what happens is that if I have a very long page, the popup div will appear in the middle of the page, it isn’t relative to where you are on the page.

    Please let me know if there’s a fix,


  296. Cris Says:

    One more thing… I’ve noticed that the blanket does not go over iframes on IE. Is there a way around this?

  297. Patrick Burt Says:

    Don’t use iframes. Ever.

  298. Cris Says:

    Well in my situation I don’t think I have a choice… Anyway, forget my original post it doesn’t matter all that much if the popup follows you as you scroll.

    Fixing the blanket over the iframe on IE8 is pretty key though…

  299. shelly Says:

    Thanks for the script/code. Is it possible for a user to close the window with EITHER the close link OR hitting escape? Thanks!

  300. John -Tampa, FL Says:

    Hey Patrick
    Thanks again for sharing the script.. Script works great. using it without issue. Only thing is I wanted to have the pop-up work with a (on-load) instead of on-click with a timed delay.. any ideas for this?

    Thanks, John

  301. Quixote Says:

    Is there a way to self close this popup after a certain time? I want to show some information, but I think most start popups should close themselves after a few seconds; and that’s precisely what I want to get. Can it be done?
    I thank you in advance for your help.

  302. Cliff Says:

    This is a great tutorial, thanks. I’m new to web design but I think this tutorial is what I am looking for. I’m basically trying to figure out how to do what Joanne posted (July 31, 2010), in the simplest manner. Specifically, I found this great website

    where when you click on an image a popup comes up but it’s not a new window (I’m pretty sure this is the same as you are teaching us here). Any thoughts if this is developed using what you are teaching here, or is this some sort of image viewer popup (if that is even possible), flash, or something else completely?

  303. Collin Says:

    Thanks for the script!

    Like John I am also interested in knowing if there is a way to have it popup onload

  304. conner Says:

    Hello, i’m not a flash designer so the code is a ? to me. haha. I’m going to learn it though.

    So i don’t know how to link it, kind of looked other sites and this is what i’ve got.

    var so = new SWFObject(“movie.swf”, “mymovie”, “200″, “100″, “8″, “#336699″);

    ::Skillet | Home

    Click Me To Close

    Click Here To Open The Pop Up

    I know it’s not right because it doesn’t open in a anything when i click it.
    I’ve got the java script u gave me saved as a js file.

    Email me what to do, thanks for your time!

  305. conner Says:

    umm idk why it didn’t put everything down but just to make sure,

    var so = new SWFObject(“movie.swf”, “mymovie”, “200″, “100″, “8″, “#336699″);

  306. Simple onpage popup - Hot Scripts Forums Says:

    [...] please post the requirements here and we might be able to help you with a more suitable script How To Do a CSS PopUp Without Opening a New Window __________________ Feel free to thank people if they help you by clicking thanks at a post. [...]

  307. Rohit Says:

    Hi Everyone,

    I have a web page and one more small page(pop up page) , i want to display this small page on the top of the big page for this i have to write some JavaScript but i am not able to find how to do it.Please suggest me or give some solution.

    Thanks In Advance

  308. Sandy Says:

    Hey guys this is very helpful good job.

    I need a popup. when the page open only the popup has to appear and it has to move from left to center. i already have the popup and its going 2 backside of the header part.

    is there any solutions for this ???

    thank u.

  309. FinePixels Says:

    [...] Click Here To Find Out How To Do This [...]

  310. Yasser Says:

    Hi !

    thank you so much for this amazing script. i have modified it and it works fine on my “local” computer on both IE and FireFox.

    BUT, I have a problem!!!!!

    I added the popup(‘popUpDiv’) to the onload even of the BODY tag so that I can get the popUp show as soon as the page loads. This worked fine on my local computer. However, when I uploaded it to the server and let my friend connect to it, the Blanket did not fill the entire page and the popup was not centered. BUT, when you hit REFRESH, everything works fine! this happened on both IE and FireFox.

    It seems that this has to do with the the script not detecting the size of the display when it first loads.

    How can I solve this problem??

    Thanks so much

  311. MV1129 Says:

    hi my website is offline but thanks for this jquery popup it fits mys site perfectly

  312. Rebecca Says:


    Thank you for this code, it is exactly what I need for my site.

    I probably have the dumbest question of all. I haven’t seen another comment about this problem.

    do I put the .js file in a folder seperate or do I put the .js code on the .html page?

    How do I make it work. I have the link opening the page I want to appear as the pop but the pop nor the blanket are appearing at all.

    How do I link this code to the .js file? i guess is the main question here. What do I need to title my .js file to make it work.

    Please use very simple laymans terms as I am only new to webdesign.

    Thank you

  313. markw Says:

    Hi all,
    I was working on a site and used the popup script so just thought i would post my modded one .. i didnt like how much code it had so i did it a simple way .. works in all browser… thanks to the guy who first made it .. nice bit of code :-)

    #blanket {
    opacity: 0.65;
    position:fixed; /* <– changed position from absolute to fixed */
    z-index: 9001;
    height:100% /* <– added height */
    #popUpDiv {
    z-index: 9002;

    function toggle(div_id) {

    var el = document.getElementById(div_id);

    if ( == 'none') { = 'block';

    }else { = 'none';


    function popup(windowname) {



  314. markw Says:

    The above code i posted 1 part is the css and other is js i forgot to space them sorry :-)


    #blanket {
    opacity: 0.65;
    position:fixed; /* <– changed position from absolute to fixed */
    z-index: 9001;
    height:100% /* <– added height */
    #popUpDiv {
    z-index: 9002;


    function toggle(div_id) {

    var el = document.getElementById(div_id);

    if ( == 'none') { = 'block';

    }else { = 'none';


    function popup(windowname) {



  315. John Says:

    thanks pat, very nicely explained and very useful

  316. Kate Says:

    Hello…was looking for a popup to display a php form… found yours and your explanation seemed easy, but I cannot get it to work… I am NOT a coder by any means, and barely understand css…. Idon’t understand where to put the js info, or if in another file, how to link my html file with the js file, and where to put the various parts. My css appears just under my Head tag on my source code page. I use a template with header, footer, and main content in Dreamweaver cs4. So please tell me where to put your various parts, and what do I do with the actual js code… separate file? If so, how do I attach to my page? Help!

  317. Thirumalesh Says:

    It saves my time.

  318. Natalie Says:

    Ai yi yi! Sorry, I didn’t know the HTML would not show as text.

    KATE: I linked the javascript file to my page. You do this with a script line inside the HEAD of your html document. It looks something like this:

    script type=”text/javascript” src=”../../../../scripts/csspopup_edit.js” /script
    (Place around script and /script).

    Just replace the src= part with the actual path to your javascript file.

    Also, you place whatever you want to appear inside the DIV for popUpDiv. Mine looks like this:

    div id=”popup1″ style=”display:none;”
    img src=”../../../../images/ou-calendars/2011/front-cover.jpg” width=”792″ height=”612″ alt=”Front Cover of Calendar” /
    a class=”action” href=”#” onclick=”popup(‘popup1′)” Click Me To Close /a

    (Again, enclose each line in . I had to strip them out so you can see the code as text.)

    Click Me To Close

  319. reu Says:

    hey !
    i would like to know how can i have multiple images, each one displayed at 1 time, and hv a button to go forward or backwards.
    tyvm !

  320. Viggs Says:

    Is there something special i need to do with a .mov file? when i try just by linking the file like i would regularly i get the pop up but then a little while later the .mov file loads up as if it was a new page.

  321. Leopoldo Says:

    Nice code Patrick! Thanks for make it public. ;)

  322. Kent Tubman Says:


    Love your script! Thank You!

    I have used it in an interesting way to display 2 different virtual tours.

    I have 2 instances of the applet on the same page.

    The script works perfectly in FireFox, Safari and Chrome.

    My issue is that when I click to open the popup using IE8, the blanket and popup work but only momentarily flash on screen then it’s gone.

    What do I have to fix so this page also works using IE8 ?

    Thank you again for your script and your help.


  323. Jack Says:


    This has been an extremely useful tutorial. I really appreciate you taking the time to post this, and give feed back. My questions pretty straight forward:

    I’d like to position the popup, but all my attempts have failed. I set position to absolute, but no luck. Any suggestions?

    Also, on a side note, I didn’t want to use the “blanket” effect, so I set its opacity to “0″. Was this the right thing to do in your opinion?

    Thanks again!

  324. Kai Says:

    I use your script on my website.

    I have a Iframe in the Div container to show a site in it.

    How can i give the Iframe in the Div another source without making more instances of the div?

    The Div should not be changed, i only want to change the iframe src in it per link.

    please help me.

  325. Martin Jackson Says:

    Hi Patrick I sent you a question via email regarding your nice bit of code but i am having some trouble implementing it in a site i am doing. My email may have gone through your junk mail.

    there should be a copy of the page attached.

    Help p-lease

    Martin J.

  326. Beau Says:

    When you open the popup, the blanketed window automatically scrolls to the top. Is there any way to keep the scrollbar wherever it is on the page when you open the popup?

    Other than that, it works great.


  327. mohit Says:

    The code worked except one thing. Click Me to Close is showing on the page itself from the very begining. Its not coming on top of the popup window. Please suggest.

  328. bindiya Says:

    Can i make a login window with username,password,new user and forgot password links using this code?

  329. Heretic Says:

    Thank you for sharing this script, it saved my time! :)

  330. Says:

    [...] Click Here To Find Out How To Do This [...]

  331. Uche Aniche Says:

    Hi, just saw your page today. Wanted to know, can I turn off the blanket part and still get the pop side to work. Are they related in any way cos the graphics I have, expects my pop-up to hang on another graphics without disturbing the previous surroundings.

  332. Chaitanya Says:

    I want to call a .jsp page to the popup div.

    So Can you say me the code how to modify. So that i can call a .jsp page.

    i had changed the






  333. LJ Says:

    Works great. However, would like to put a php form in the pop-up. Can anyone drop a comment on how to do so?! Greatly appreciated.

  334. Philip Says:

    Briliant work!

    In order to get the popup to appear in the middle of the window after the window has been scrolled down:

    Add the following two functions:

    function f_scrollTop() {
    return f_filterResults (
    window.pageYOffset ? window.pageYOffset : 0,
    document.documentElement ? document.documentElement.scrollTop : 0,
    document.body ? document.body.scrollTop : 0

    function f_filterResults(n_win, n_docel, n_body) {
    var n_result = n_win ? n_win : 0;
    if (n_docel && (!n_result || (n_result > n_docel)))
    n_result = n_docel;
    return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;

    And then remove the line:
    popUpDiv_height=blanket_height/2-150;//150 is half popup’s height

    And add the lines:
    popUpDiv_height = f_scrollTop() + viewportheight / 2 – 150; //150 is half popup’s height

    Credits to :

  335. michael lanham Says:

    okay is there a way to were, i can open a sized down webpage in it, instead of an image?

  336. michael lanham Says:

    a .html file to be exact.

  337. LJ Says:

    Was able to put php form in the popup and works great as long as you follow the directions. However if you miss a required field and hit submit button, pop-up closes and fails to show the message indicating this field is required. Subsequently when you open the popup, show the message. How do I prevent it from closing the pop up and displaying the error message the first time? Any suggestions?

  338. Presh Says:

    I was told by a programmer that the csspopup has alot of difficult coding and it contains javascript so he never thought it to me

    I would love to show him that i did it the simple way thanks to you Patrick (”,)

    Though im still trying to figure out how to add a close option (X) on the image

    Perhaps you could help me out with this, please reply via email

    Thanks alot Patrick

  339. Marc Says:


    Your code has worked wonderfully. Thanks for sharing it.

    I have an issue and wondering if you could perhaps shed some light on this for me.

    I am using these hidden DIVs inside a Database loop. Within each DIV I am using iFrames where I pass variables to a window to display specific content for each link.

    The issue I’m having is in order for each iFrame to display the correct info the Div wrapper must have a unique ID, otherwise the browser will just publish the final iteration of the DIV.

    I can create the DIV names dynamically, but then the Javascript won’t work, because the javascript requires a pre-known DIV name that I can’t know beforehand.

    If you can shed light on this I would really appreciate it.


  340. Ken Says:

    Patrick you are awesome! Thanks for positng this.

  341. Silviu Says:

    How can i change it to make the pop-up show up without having to click on it. Every time i open the web page the pop-up will show up .

  342. Silviu Says:

    solved that problem how can i add an image or text in the pop-up ?

  343. ska Says:

    How to open a url or a file (excel / image) in the popup ? where should the url to be given ? Tried giving in the of the Click here to open.

  344. Scha Says:

    Hello richard!!
    i’m having a problem on how to make an image as a popup window…
    can you show popup window just like you showed above using css???

    does is use the same coding that you have showed above..??
    actually i am not good in web designer so i am trying to learn and discover on how to fix out the problems..really need your help..
    please and please..

  345. Scha Says:

    sorry for the name mistake…

  346. Adagio Says:

    Patrick, thank you for your solution. I spent for about 2 hours and it works!!! Thank you! But, I have a problem with displaying several such links/popups on a single page. You recommended above to have “uniquely named DIV ID and to change the popupDiv to that new name”. I couldn’t solve that question. Did I change it correct (please see below)? The second pop up doesn’t work properly.

    div id=”blanket” style=”display:none;” /div
    div id=”popUpDiv” style=”display:none;”
    a href=”#” onclick=”popup(‘popUpDiv’)” Close[X] /a
    a href=”#” onclick=”popup(‘popUpDiv’)” Click Here To Open The Pop Up/a

    div id=”blanket” style=”display:none;” /div
    div id=”popUpDiv2” style=”display:none;”
    a href=”#” onclick=”popup(‘popUpDiv2’)” Close[X] /a
    a href=”#” onclick=”popup(‘popUpDiv2’)” Click Here To Open The Pop Up /a

    What am I doing wrong?
    Thank you.

    (sorry, that was a second messages without tags so the code is displayed on the page as a text). Please remove the previous message.

    Thank you.

  347. Chris Says:

    This code is great! I learned a ton and it’s fairly simple. My problem is this: Internet Explorer. In IE the blanket shows up darkening the main page, but the popup doesn’t show. I have a Mac and the coding works great in Safari, Chrome, and Firefox. Since I don’t have IE, I can’t debug in it easily. Which CSS attributes are vital for IE to display this properly? I changed the CSS slightly so that I could popup multiple DIVs. I switched the popUpDiv id to a class in my CSS file as such:

    .popUpDiv {
    position: absolute;
    background-color: #CEDDEE;
    width: 600px;
    height: 400px;
    z-index: 9002;
    padding: 0px;
    margin: 0px auto;
    border: 2px solid 772222;

    (the #blanket remains as is)

    What would need to change for it to display properly in IE?


  348. Tim G. Says:

    Nevermind. I figured it out. It’s in the Javascript. Thanks for your great tutorial here!

  349. jesh Says:

    I want the pop up div to push the divs behind it out of the way…see, click a feature box and the popup comes up and pushes the other boxes aside…guessing its a css attribute?

    Using masonry jquery for a page of clickable divs, want the popupdiv to open up which I have figured out with your help…now to make it better!

    Thanks in advance!

  350. Treyton Says:

    How do I add a border to the pop up? I tried it with css and no luck. Any ideas?

  351. aditya pratap singh Says:

    hi patrick..

    ur code works perfectly well…

    but need a little help how place a link to another web int the popup window…

    plz plz help me its urgent…

  352. Chip Says:

    all good info. but for us dummies….. where do all these codes go. are they all placed on the page your want the popup? do you need to make another doc to point to? where do i change the content of the popup?.

    what lines fo the code do i need to change to get it to point to the info i want on my web site.

    looks like a good code, but for us newbies not enough info as to where all this needs to be placed in ones own files structure.

  353. Agu Says:

    first of all thanks for sharing the code. Helps me a lot. I’m testing it right now, works great in Chrome and FF, but it doesn’t work in I.E.? I have the old I.E. 6 installed on my comp, I haven’t tried another version.

    If it’s true, how to put a workaround code for I.E. users, so that it pop-ups into blank window?

    Thanks a lot.

  354. Says:

    Hi, there are a lot tips which is i search! But nothing as simple as yours for me. Thank you for your great post.

  355. praveen Says:

    hi, i can’t make it work.. :| actually my website is made in parts say header content and footer,everything is a different file attached via PHP include function so the link for the popup must me be in header file and the page which i need to popup is another file?
    sorry but i am total a n00b with CSS i usually do PHP only.

  356. praveen Says:

    ok solved it :)

  357. Dave Says:


    I’m trying to test this on compatibility trhough the program IETester but the opacity isnt working in IE6?

    Or is this just a case of the software displaying it wrong (never had a problem before)?


  358. mohamed Says:

    thx for the sharing :)

    how can i put a text not a background ?

  359. Tom Green Says:

    Great Code! What can i modify in the Javascript to make it work with CLASS instead of the ID in the divs. Also, Is there a way to make the links in the pop-up be added to the tab order, in other words adding focus to the pop-up links with the tab key.

  360. BaldOne Says:

    I was playing with the JavaScript, I changed it as little. It helps me center the popupdiv.

    function popup(windowname,Height,Width) {
    var windowHeight = Height/2;
    var windowWidth = Width/2;

    added width and height of popup

    add to function onclick popup(‘nameofwindow’,’600′,’600′)

    so that when the function is run is with div size and center properly. remember to add it in the close function as well.

    sorry if the has already been talked about.

  361. Fer Says:

    Man you are amazing, thanks for the code…

  362. FreeNFullDownloads Says:

    It seems to be very useful. Can it work with chrome?

  363. Bruno Alves Says:

    Pop-Up por cima do FLASH !!! (SOLUÇÃO)


    ‘wmode’, ‘transparent’,


  364. Novella Says:

    Grazie!Ottimo codice!

    Greetings from Italy! Really thanks you!^_^

  365. DJToasted Says:


    I have been scrolling through the comments and cannot find a solution.

    I am using IE8 and the popup works great except my page is long and some links you have to scroll to get to. When you click for the popup it returns the page to the top then displays the overlay and then when you close the popup the main page remains at the top.

    I need to modify the code to have the popup appear in the scrolled position without the main page moving, and then be able to close the popup without the page returning to the top.

    I have seen some posts on this but none of the solutions above appears to work for me.

    Any help would be greatly appreciated.

  366. Fabian Says:

    Hi, wonderfull work, But I need some help, How can I insert into the popup a HTML file, or even better a html table?

  367. Toby Says:

    Hi There, I have a flash file that I want to display in the popup your code works fine and I click an image and the ‘popup’ opens and the flash file loads however I have no way of getting back to the page below.

    any ideas?


  368. Chandrika Says:

    Nice script.
    I would also like to know if I had a minimize button on the pop-up,how would I write script for it?

    Thanks in advance :)


  369. Adrian Says:

    Very nice script. Simple and easy! Bravo!
    I lost my other night trying to work with a more complex modal, when i had it all here.
    Thank you!

  370. not bale to open popup div - SitePoint Forums Says:

    [...] How To Do a CSS PopUp Without Opening a New Window i am using the code fom above for popup div but getting error object required in IE & [...]

  371. Dan Hamilton Says:

    Thanks for publishing this. Saved me lots of time.

  372. Saber Says:

    A simple and elegant solution.

    Any idea how I would get dynamic text into the pop-up (I want to keep just one) based on some parameters sent from PHP to mySQL?

  373. Marwa Says:

    I’m trying to start my website with this popup rather than having to click on a link for it to popup.
    I viewed the answers above, but when I remove the display:none from the DIV containers (blanket and popup) the popup appears at the upper left corner and the blanket dose not appear at all.
    Any ideas how to do it?

  374. amoore89 Says:

    I’ve read through every comment and have tried mutiple things -
    Does anyone know how to CENTER the div on the screen and NOT on the page?

    As other have said, my page is also pretty long and pop up loads in the middle of the
    page, forcing users to scroll down to see it.

    It’ll be extremely helpful if I could align the popup where they can see it whenever
    they click on the link.

  375. Impacts of Globalization on Health (Part I) Says:

    [...] Click Here To Find Out How To Do This [...]

  376. Newtocoding Says:

    I just want to thank you for tposting this. I now look like a rock star!

  377. Newtocoding Says:

    amoore89: I only used one single popup, so I just changed the top and left margins for the popup div to get it centered. I don’t know if there is a better way, but it worked for me!

    #blanket {
    opacity: 0.65;
    z-index: 9001;
    #popUpDiv {
    margin-top: -300px;
    margin-left: -339px;
    position: absolute;
    z-index: 9002;
    display: block;

  378. captnbirdman Says:

    I am also including php in my website. I wanted to know basically, if this is compatible with your codes, and what, specifically, the “#” is for in the href section. can i say, add to it for a $_GET[] call so the “pop-up” can have text from a database show up? I tried reading through all of the comments but there are just so many different comments.

    If someone has asked this already, if you could direct to that line?

    This is what i am more or less, trying to do.

    <a href="#?q=” onmousedown=”popup(‘popUpDiv’)”>



  379. Chris Stuart Says:

    Thanks Partick, this is exactly what I was looking for to use on my portfolio.

  380. Tzu Says:

    Hello Patrick ,

    Thanks for sharing your script. I’m doing a web site right now but I’m still lost on how to pisition the Div box. I want to use image as icons so when people click, it opens the pop up windows. Due to the icons are different shapes, can i use map to create links? And do you know where i can reposition the pop up window? Do you mind i send you the files so you know what i am talking about? I really appreciate.

Thanks in advance.


  381. sandeep Says:

    Its a great post..helped me a lot …Thank You Very much

  382. Savitha Says:

    Thanks a million for sharing this great script…
    I was looking exactly for this.

  383. jason Says:


    It is not working for me. The Opacity and filter have a red underline (I use Web Expression 4). When I go to test the page, I click and nothing. When I scroll down and then click, it scrolls back to the beginning.

    What do I do? the coding can be found at the website I have. click on my name in this comment for it.

    Thank you very much.

  384. jason Says:


    I figured the problem out for why it would not work. I did not copy the file to the js folder on my site :P

    Now my only question is: How do you fix it so it does not keep scrolling back to the top? You click on the link and it makes the page move up to the top and same with when you click on the “click to close link”.

    Thank you.

  385. sandeep Says:


    I have placed some textboxes and one button control in this PopUp ..Now I want to save these values when clicking on the button control……………..

    Please provide the solution

  386. Drew Says:

    Hi weird question but maybe it’s worth a shot.

    Is there any way to do this so that it doesn’t load every time the page is loaded, but rather say once every week, or once every fifth time the page is loaded? I’m intending to use the removing the ‘display:none’ to achieve automatic popup technique mentioned above.


  387. Josh Says:

    Wow, great code!

    Thanks for letting others use it freely. Definitely going to revisit!


  388. adam pery Says:

    Hi, the script calculate top position wrong. Left position may be changed too (without static numbers).

    I have changed you function with using with jQuery:

    function blanket_size(popUpDivVar) {
    var popUpDiv = document.getElementById(popUpDivVar);
    var wh = $(window).height()/2;
    var ws = $(window).scrollTop();
    var dh = $(‘#popUpDiv’).height()/2;
    var popUpDiv_height = wh-dh+ws; = popUpDiv_height + ‘px’;

    if (typeof window.innerWidth != ‘undefined’) {
    viewportheight = window.innerHeight;
    } else {
    viewportheight = document.documentElement.clientHeight;
    if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
    blanket_height = viewportheight;
    } else {
    if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
    blanket_height = document.body.parentNode.clientHeight;
    } else {
    blanket_height = document.body.parentNode.scrollHeight;
    var blanket = document.getElementById(‘blanket’); = blanket_height + ‘px’;

    //var popUpDiv = document.getElementById(popUpDivVar);
    //popUpDiv_height=blanket_height/2-$(‘#popUpDiv’).height()/2;//150 is half popup’s height


  389. Veronica Says:

    Great code!
    Just I want to thank u for your post, helped me a lot!

  390. Geo Says:

    Hi, if you dont mind me asking. can you pass information from the pop-up back to the original screen?

  391. Harsh Raval Says:

    It helped me in my project. Thanks for sharing this.

  392. Makera Says:

    Hello Patrick, great code here. I tried including unique ID’s in the css rule so as to achieve multiple popups with different links but I keep getting the same content. What am I doing wrong? Please advise.

  393. Wieger Says:

    Hi Patrick,

    Thanx for your code! Slightly changed it. Wanted to close the Popup when clicking on the blanket.
    Used JQuey to set the onclick event of the blanket.

    To do this :

    Get this JQuery include file (free) and include it before including the other js file:

    Add this small piece of Javascript at the end of csspopup.js:

    $(“#blanket”).click(function() {
    return false;

    // other load stuff can be done here as well -> works better than the doy onLoad

  394. Shotmiser Says:

    many thanks, great bit of script. I’ll use this many times I think.

  395. Tridentas Says:

    Excellent post. I was checking continuously this blog and I’m inspired! Very useful info specially the ultimate part :) I care for such info much. I was looking for this particular information for a long time. Thank you and good luck.

  396. Lee Says:

    This is a fantastic bit of scripting :D

    With the help of some of the comments in the script and the replies on this blog I finally understand its basic mechanics.

  397. akshay Says:

    Hey very usefull script, for people that want to know how to make the popupdiv scrollable just set a specific height and make overflow:scroll; on the css of popupdiv

  398. Zack Says:

    Hi, thanks for the script, Just thought I’d share my edits, I made a way simpler version based on yours, but without that big JS script ;)

    margin: 0 auto;

    opacity: 0.50;
    z-index: 9001;
    height: 100%

    z-index: 9002;
    margin: 100px 450px;

    Open popup


  399. Josh Says:

    Hello, I love the script, and I’ve actually been wondering how to do this for a while. After some experimenting, I got it to work for making two different windows popup.

    Now, here’s my dilemma:

    One of the windows that pops up is a signup window, and the other is a login. At the bottom of the signup div, there’s a link (ahref) that says “If you already have an account, please login.”, and a similar one on the login popup div.

    When the user clicks the link, I want to be able to close the current div (signup) and open ‘login’ while still keeping the blanket.

    I created a custom function, poptoggle, but I have been trying for about half an hour and cannot seem to get it. Any help is greatly appreciated. :)

    If you didn’t understand me, check the “website” field in this comment and it will be there.


  400. Scott Atkinson Says:

    Hi Patrick,

    Thanks for the excellent script, quick question though, im using this on one page of the website im building for work and its going to be used 5 times in total on different sections of the page, can you shed some light on how i can achieve this without having mutltiple javascript files, well a total of 5 to be honest…..any help with be highly appreciated.



  401. Scott Atkinson Says:

    Sorry wrong email on the other comment

  402. Irena Says:

    Hello Patrick.

    I spent 2 hrs reading thru all the comments before posting. Have learned basic CSS & html but not java yet. Looking for good method to list 30+ cakes on a page. Want user to click on name (eg Mud Cake) & have a pop-up window display pic. I had thought I found the perfect answer, but then I think a couple of posters said this method loads ALL the pics in the background, thus slowing down the page load time, correct? Seems no answer to this problem has been posted.

    I need the page to load quickly. So can someone help with a sample script / method pls?

  403. Sandeep Jayan Says:

    thanks for nice script.
    is it possible to open a popup inside a popup.
    please replay

  404. Tim Says:

    Thanks for the code! It would great.

  405. Javed Says:

    But how can it be used for image..???
    Please give me example with coding.

  406. Rodolfo Says:

    Hi, very nice script. One question / comment. When the screensize is similar size to the webpage then the popup is centered correctly. But I found out that when the webpage is (e.g.) 5x taller than the browser window the popup is centered in the webpage and not the user window. Can this be changed? (of course I’m learning CSS et al). Many thanks

  407. lakshay Says:

    Not working on wpm

  408. lakshay Says:

    can someone tell me the code for wpm plz………………

  409. lakshay Says:

    how can i give span in popup

  410. wei Says:

    where can i get csspopup.js file?

  411. wei Says:

    sorry, i found it

  412. wei Says:

    great , it works but do you have other code like … when i have a side drame with 3 link when i click one of the link and the video and other link will slide out from the side with a slide?

  413. Google dart Says:

    I do not even understand how I finished up here, but I thought this submit was once great. I don’t realize who you might be however certainly you are going to a famous blogger for those who are not already ;) Cheers!

  414. wei Says:

    i have a problem , cause yr code is for one pop up screen link only , but if i have mutliple many icon which need to do the same time what should i add?

  415. coffiehaus Says:

    Thanks for this elegant solution. It works when I test it on your site but does not work when I copy all your code to my sample project. What am I missing. Please help.

  416. coffiehaus Says:

    Can someone please share how they might use this for a login form or nay other form for that matter.

  417. Jared Says:

    You don’t need javascript to do this. Just set an anchor element that points at something like #open.
    Then in your CSS

    open:target {

  418. Hurricane / security & regular window tinting for all glass. Says:

    Thank you, I have recently been looking for information approximately this topic for a while and yours is the best I’ve came upon so far. However, what about the conclusion? Are you positive in regards to the supply?

  419. Luke Says:

    This is a really cool piece of code…

    I was just wondering if someone could educate me on how to set up a form on the popup window which then submits the information and displays it on the primary window?

    Thanks very much in advance!

  420. john S. Says:

    Hey Patrick! Great code – I was having that problem with the window not being able to place it. like the first question on January 29th, 2008 at 8:40 am. I tried the 2 code mods in page and in Js file but now it doesn’t work at all? Also if I could also ask can I just load an iframe in the div if i want scrolling?

    Any help appreciated!


  421. Ludwig Says:

    I think Patrick is on vacation.
    But man! what a nice piece of code here.
    Thanks alot Pat.

  422. vishal Says:


    Thanx very much Philip. your code for centered popup even page scrolls down worked like a charm

  423. photoshop style Says:

    It?s really a great and useful piece of info. I?m happy that you simply shared this helpful info with us. Please stay us informed like this. Thanks for sharing.

  424. howtofixmycomputer Says:

    Great post. I used to be checking constantly this blog and I am impressed! Extremely helpful info particularly the remaining part :) I take care of such info much. I was seeking this certain info for a very lengthy time. Thank you and best of luck.

  425. RiseNoMore Says:

    Sorry, code should read…

    <a href=”#” onclick=”popup(‘popUpDiv’); return: false;”>Click Me To Close</a>

  426. Musharif Khan Says:


  427. arjun Says:

    how to remove the text: Click me to close?

    and is it possible that pop up image go away when people clcik outside the picture?
    please tell me solution

  428. kae Says:


    i have tried to change the names to specify the separate divs i want but every time i change the name from “popUpDiv” to anything else the pop up doesnt work. i saw where you said i only had to change the div id and after onclick=”popup(‘#’)” and i did that but it just isnt working for me. am i missing something? thx!

  429. Sklep Dla Niemowląt Says:

    My brother suggested I may like this website. He was once entirely right. This publish truly made my day. You cann’t imagine simply how a lot time I had spent for this information! Thank you!

  430. belstaff jacket|belstaff leather jackets Says:

    Pretty nice post. I just stumbled upon your blog and wanted to mention that I’ve really loved browsing your weblog posts. In any case I will be subscribing for your rss feed and I’m hoping you write once more very soon!

  431. Alin Says:

    I found your nice popup
    I am in an error, when I use it for and test page without anything then it work fine, but when I applied it to my site then when click to popup, yes it appear popup windows but it unload and back to home page after a second
    Can you please help me to fix this error

    Thank so much

  432. JDuarteJD, developer Says:

    I have made a couple of *simple* changes to the script where it would improve a lot (to my view ofc):


    Adding this code to the popup function will allow the “window/popup” to be always on center even after resizing:

    window.onresize = function(event) {


    changing this code on the window_pos function will allow the use of popups of ANY size:



    3rd and last (optional):

    adding/changing this code int the blanket size function allows the pop up to be fixed , ie, no matter where you scroll it is allways in the center of the screen:

    //’seeable’ size
    if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
    if (document.body.parentNode.clientHeight < document.body.parentNode.scrollHeight) {
    viewportheight = document.body.parentNode.clientHeight;
    } else {
    viewportheight = document.body.parentNode.scrollHeight;


    var blanket = document.getElementById('blanket'); = blanket_height + 'px';
    var popUpDiv = document.getElementById(popUpDivVar);
    popUpDiv_height=(viewportheight-popUpDiv.clientHeight)*0.5; = popUpDiv_height + 'px';

    ;) gl

  433. JDuarteDJ, developer Says:

    for some reason I also need to use this code after changing the window onresize event:


    else the fixed position doesnt work. this is a workaround/patch if you debug my code please reply so I can fixed ;) thanx

  434. JDuarteDJ, developer Says:

    Correction* the window positioning doesnt work! (it is still fixed but missplaced when the popup is called)

  435. JDuarteDJ, developer Says:

    Unless you have programmed something to hide the popup other that user interaction (event, timeout,etc) your site may have a reload instruction or something of that nature that resets the page thus making the div invisible.

  436. Ed Says:

    Hi all,

    Does anyone know how to stop this div inheriting from above because currently the script only greys out the container and not the entire browser page?

    Thanks in advance!

  437. t Says:


  438. Henry Says:

    I found your code and it works really well – thank you. Is it possible to run the code and temporarily stop the user from going to another page to allow them to fill out a survey on the page then redirect them to their other page?

  439. Michael Kennedy Says:

    is there anyway to make the popup close from clicking the blanket or transparent layer of the popup?

  440. Truth_finder Says:

    Thanks thanks alot Patrick Burt…….. it helped me.

  441. mujehaninc Says:


    Is there anyway the pop-up image will be random each time?

    ex. if there’re 10 images. i want to pop-up image that appears is random from that 10 images?

    How i can?

  442. garden edging ideas Says:

    Unquestionably believe that which you said. Your favourite reason seemed to be at the web the simplest thing to take note of. I say to you, I definitely get annoyed even as people think about worries that they just don’t understand about. You managed to hit the nail upon the highest as well as outlined out the whole thing with no need side-effects , people could take a signal. Will likely be back to get more. Thanks

  443. free skyrim, free skyrim copy Says:

    You really make it seem so easy along with your presentation however I find this matter to be really something which I think I might never understand. It kind of feels too complicated and extremely huge for me. I am having a look forward to your subsequent publish, I?ll try to get the hold of it!

  444. dubai web design Says:

    Woah this weblog is excellent i really like reading your articles. Stay up the good paintings! You already know, many people are looking around for this information, you can help them greatly.

  445. Tom Says:

    Excellent stuff man – however in the changes you made above on Dec 14th, where specifically do they go and/or do you have an updated version of the js file with the changes in it already?

    Also I am caught in a div situation where it grays out the parent div instead of the entire page…. Any clue on escaping that? :-)

    Thanks again

  446. Roy M J Says:

    Great article… Thanks a lot for sharing…

  447. Sexcams Says:

    Hi there, I discovered your web site by the use of Google while looking for a related matter, your web site came up, it seems to be great. I’ve added to my favourites|added to my bookmarks.

  448. Buy facebook likes, cheap facebook fans, cheap facebook likes, fb fans, fb likes Says:

    you are actually a good webmaster. The site loading speed is amazing. It kind of feels that you are doing any unique trick. Furthermore, The contents are masterwork. you have performed a fantastic task on this subject!

  449. shane Says:

    I am wondering why the popup window doesn’t work on my case. I follow all the steps on this tutorial. I just add a php file to the href tag and it turns out to load that page but not showing the pop-up window. There is no effect. Help please on how to work with this pop-up css

  450. BeachCoder Says:

    I have the problem that when the user scrolls a long webpage, the pop-up appears out of view. I need to have the pop-up appear in the middle of the current view of the window.

    Philip (and Vishal), I tried incorporating your code but it did not work. I get a syntax error for this line:

    popUpDiv_height = f_scrollTop() + viewportheight / 2 – 150; //150 is half popup’s height

    Also, you mentioned at the end of your post that there were multiple lines to change, but you only provided one line of code. Your help is welcome!

  451. hintafa Says:

    Popup works fine, but i can figure out, how to pop up different images, or texts:

    Like if we had 3-4 lines of “Click Here To Open The Pop Up” , and each of them opens a different image or text.
    Could we manage to do it? Or is t very simple and i’ to tired?:)

  452. Dale Says:

    Hey thanks for the tutorial.

    for some reason when I try and do this I get the error

    Error: popup is not defined
    Source File: file:///Users/Dale/Sites/SHOWREEL/video.html#
    Line: 1

    And for the life of me cant work it out!

  453. retail display materials Says:

    I savour, result in I discovered just what I used to be looking for. You’ve ended my four day long hunt! God Bless you man. Have a nice day. Bye

  454. Tanya Says:

    Hi there, is this such an awesome thing, have been looking for one for weeks.
    i have 2 questions, how to i make it lie against the left side of the page, also i need the pop up to load as the page loads and i have read the comments that say delete the display none, but then it just opens the block by default top left and moves everythng else over. have inserted the code just after the body tag. thanks again.. its awesome

  455. двп Says:

    Great post. I was checking continuously this blog and I’m inspired! Extremely useful info specially the ultimate section :) I care for such information much. I was looking for this particular info for a long time. Thank you and best of luck.

  456. Augusto Says:

    Wow, awesome job! Tried it and works like a charm.
    Just one small question: is there any chance of making the pop-up window appear only on the first visit to the website? The site I’m creating has all of its main options on the homepage, and it becomes quite annoying having that pop-up appear every time I go back to the main menu.

    All good other than that!
    Thanks HEAPS.

  457. angus macfadyen Says:

    Simply desire to say your article is as amazing. The clearness on your submit is simply spectacular and that i can suppose you are an expert on this subject. Fine together with your permission allow me to snatch your RSS feed to keep updated with approaching post. Thanks 1,000,000 and please continue the enjoyable work.

  458. Cheap Equipment for Sale Says:

    It?s actually a nice and useful piece of information. I am glad that you simply shared this useful info with us. Please keep us up to date like this. Thank you for sharing.

  459. [cluster headache|headache relief|headache sufferers|migraine cures|migraine headaches|migraine symptoms|natural headache remedies|naturopathic approach|pharmacy times] Says:

    Whats up very cool blog!! Guy .. Beautiful .. Wonderful .. I will bookmark your website and take the feeds additionally?I’m satisfied to search out so many helpful info right here in the publish, we need work out extra strategies in this regard, thanks for sharing. . . . . .

  460. jordan C Says:

    hey thanks for the great tut i was looking everywhere for it and im terrible when it comes to browser coding. How can i make the popup load on start? if it is possible.

  461. hookup sites,free hook up sites Says:

    I just could not leave your website prior to suggesting that I actually loved the usual information a person supply in your guests? Is going to be again regularly to check out new posts

  462. piano lessons Says:

    Thanks for the tips on credit repair on this blog. The things i would tell people will be to give up the actual mentality that they may buy currently and pay back later. As being a society all of us tend to do that for many issues. This includes getaways, furniture, in addition to items we wish. However, you’ll want to separate a person’s wants out of the needs. When you are working to raise your credit score make some sacrifices. For example you possibly can shop online to save money or you can click on second hand outlets instead of high priced department stores with regard to clothing.

  463. get more facebook fans, get more twitter followers, get more youtube video views Says:

    Awesome things here. I am very satisfied to peer your article. Thanks so much and I am taking a look ahead to contact you. Will you kindly drop me a mail?

  464. Tha'er Says:

    thanks for the code
    but i have a problem with linking the Java o CSS can you please advice best what to name the files (Java Script File and the CSS file)

    Thank You

  465. furnizor mobila Says:

    That is really interesting, You’re an excessively skilled blogger. I have joined your feed and look ahead to in the hunt for extra of your great post. Also, I have shared your site in my social networks

  466. Nate Says:

    I’m trying to use multiple popups on one page. I tried just to use the original popupdiv div you use, but it only shows the first popup no matter what I click.

    When I try to do custom div names, the black blanket will appear but the div will show up underneath the blanket and cannot be closed.


  467. sunil sharma Says:

    very nice and easy to understand thanks

  468. CowboyTed Says:

    Pat, I was inspired by your idea. Here is a simpler way to use the JavaScript. I am not a JavaScrip guru either but we have to use it from time to time don’t we?

    The whole code is below in three sections,… the css, javascript and html,… extremely easy and tested in all current FF, IE, Chrome, Safari, and Opera.


    // css – note that you must have the two opacity settings in the css as ie does not recognize opacity
    but uses filter. Also the css with the link has a span inside a span. They both MUST be absolute and
    the position must be defined even if it is 0px;

    <style type=”text/css”>
    border:1px solid #ccc;
    padding: 5px;
    border:1px solid #ccc;
    padding: 5px;
    filter: alpha(opacity = 50);
    border:1px solid #ccc;
    padding: 5px;


    the javascript to make it all work – very simple js – works whether you use
    onClick or onMouseOver.

    <script language=”JavaScript”>
    function ShowPop(id)
    document.getElementById(id).style.visibility = “visible”;
    function HidePop(id)
    document.getElementById(id).style.visibility = “hidden”;

    the html code for both popups – note that the links are different and
    in different palces for the two. The onClick requires the close link in the popup. The onMouseOver
    has both close and open in the same link.

    <a href=”javascript:void(0);” onMouseover=”ShowPop(‘demo1′);” onMouseout=”HidePop(‘demo1′);”>
    Popup onMouseOver</a>

    <a href=”javascript:void(0);” onClick=”ShowPop(‘demo2′);”>Popup Open</a>

  469. Richard Says:

    Great lesson! Question… How would one auto-align this pop-up horizontally AND vertically to the viewport/browser dimensions… I’ve been mucking around with implementing that for hours with no luck.

  470. luke Says:

    Hey – This is a pretty old post, so I’m not sure if you’re still looking at it,
    I’m trying to do this with images… I have a bunch of images displayed in a horizontal line, and I want to be able to click on one and enlarge it just like your example.

    When working with your code, crazy stuff happens, namely, there is no clicking, my images that i classed as popUpDiv displayed as big from the get go…
    also, is the html you provided supposed to go in a script tag which is then linked to your .js file???

    any ideas?

  471. Jan Says:

    I was wondering if it’s possible to have so that the “window” automatically pops up when someone enters the hompage of a website rather than having to click on another link?

  472. solomon Says:

    hi ,

    am new to this IT environment..i have asked to create one task like,

    while click on image(static image) it should popup a video player(say an example, you tube) window at the center of the screen remain background should be balnked out..and that video should be dynamic means that recently uploaded video should play..

    am doing code in visual studio 2010 .

    can u please help me out

  473. Paul Says:

    Hi, great tut, with out question!

    But im having a problem, i need the pop up to appear in the middle of the screen, and not flick the screen back up to the top of the page then, i need to add content in the new window, i wanna put a Google map in my window and for some reason its got me in a tight position because i don’t know where to place the HTML the scripts for the Google map and i don’t know how the hell im supposed to even make the thing drop a shadow on the whole page, because it just drops a blanket on the main body not the background or header! weird! Can you please help me???

  474. Avinash Says:

    i have a contact us form in html, i want to pop it when a link is clicked

  475. design shop Says:

    nice tut,

    i search this for a quick view for products.
    i test this in the evening.
    thanks for posting!

  476. windy Says:

    How to close the popup without call popup() function?
    I want to open the css popup and a new window same time by adding in to popup() function. So the problem is when i close popup css, new window popup is run again.
    How can i do that?
    Sorry for my bad english.

  477. Life Says:

    Great job! Thanks!

  478. Mark Says:

    Hooray for you! Thanks, this is exactly what I wanted!