30 responses to “Quick and Easy Windowless Popup Overlay in jQuery”

  1. Bradley Konechne

    Great Tutorial!!! I’m new to juery, and I was looking for an easy popup window technique. One question though, what does .data(“state”) do. I haven’t run into .data() yet, and I am a bit confuse.

    Thank so much for the tutorial

  2. Dan Harvey

    Thanks for this tutorial… good stuff. I’m using some of this code on a site, but imho it also should call the center function on resize, eg:

    $(window).resize(function() {

    Also, not quite sure why (I’m looking into it still) but it doesn’t center perfectly, it goes slightly low and to the right. Any thoughts?

  3. How to Become a ‘Rockstar’ Web Developer (Without the Risk of Fatal Bus Accidents) — @TMGmedia

    […] […]

  4. Vidar Andersen

    Thank you, Joel! Great script! Almost what I’m looking for! I’m aiming to trigger the pop up automatically on various user agents and show alternative contents per agent (e.g. for driving attention to a mobile app available for the respective platform). However as it’s been literally eons since I’ve touched ecma/js, perhaps you could point me in the right direction?

    I guess I’ll be using something like an if statement with a user agent check on document ready?

    $(document).ready(function() {
    if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/iPod/i))) {

    Thank you in advance!

  5. Bort Q. Rockefeller

    Wow! Neat! That’s just what I’ve been looking for.

    One question: how can I get #Popup to appear, say, 150 pixels from the top (still horizontally centered)?

    (I’m thinking the answer lies somewhere in the javascript section.. and, yes, I’m a bit of a dullard :P)

  6. Jask

    Hey Joel ,
    It’s a great tutorial , something that I can use to display my results over an Ajax call , but when I just try to run the code and click the button , nothing happens. I have seen that there are no errors in firebug too.
    Can you suggest me what should I do ?

    P.S : I am including jquery-1.3.2.min.js library .


  7. Kim

    Hi! Thanks for sharing this. Works great! What’s the easiest / best way to add multiple popups on one page? Thanks!

  8. Junior

    Hi there. Thanks for the tutorial!

    One issue I found. I have placed a YouTube video inside the popup and it works fine.
    However, if you close the window, the video keeps playing. You have to open again and pause.

    Is there a way to kill the content once you click in “close”?

    Thank you for your time!

  9. ambrex

    Brilliant man…! Finally, a technical tutorial that is not complex and does not assume the reader is also a Sr. Web Developer!

  10. Robyn

    Thanks so much for keeping this simple, straight forward and easy to follow. This worked great right away!

  11. Gabriel

    Hi Joel, nice plugin but I have a question (request):

    How may I use this popup to appear automatically after 3 seconds after a user visits my home page (once loaded) appear once per day?? What I want is to show a popup that displays a newsletter sign up form box.

  12. james

    Hey Joel,
    It’s a great tutorial.Thanks for keeping this simple, quick to follow. Worked right away.

  13. Lišči

    Hi there
    Great tutorial, working well, but when I try to push the button in the pop-up window, nothing happens.
    Can anyone help please?


  14. Sardar Ranjeet Singh

    Thanks for your post, really its work.

  15. james

    Awesome tutorial, can’t beleive I didn’t come across it sooner. One question! How can I make the popup occur on page load rather than use a button?

  16. Edie

    This is awesome! Thank you! Is there a way to have a text link to open the pop-up instead of a button?

  17. Nidhi Sharma

    Great Work Joel !!

Leave a Reply