A very Simple jQuery Popup ready to use Code!

ppop
Posted on by agurchand

I have written a very simple jQuery popup that you can use it right away.  Very simple code, if you know jQuery a little you can understand the code easily.  This script contains only 20 lines of code if you remove the comments and spaces!. Tested in all major Browser, Working Perfectly!

You can download the script at the bottom of the page!

 

1. See the javascript part here:

[code]

<script type=”text/javascript”>

$(document).ready(function(){
//open popup
$(“#pop”).click(function(){
$(“#overlay_form”).fadeIn(1000);
positionPopup();
});

//close popup
$(“#close”).click(function(){
$(“#overlay_form”).fadeOut(500);
});
});

//position the popup at the center of the page
function positionPopup(){
if(!$(“#overlay_form”).is(‘:visible’)){
return;
}
$(“#overlay_form”).css({
left: ($(window).width() – $(‘#overlay_form’).width()) / 2,
top: ($(window).width() – $(‘#overlay_form’).width()) / 7,
position:’absolute’
});
}

//maintain the popup at center of the page when browser resized
$(window).bind(‘resize’,positionPopup);

</script>

All are commented so need to explain the code i think!!.

 

2. Styles used:

[code]

<style>
#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
#pop{
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>

 

3. HTML Part:

[code]

<a href=”#” id=”pop” >PopUp</a>
<br />
<form id=”overlay_form” style=”display:none”>
<h2> Put your contents here..</h2>
<label>Username: </label><input type=”text” name=”username” /><br /><br />
<label>Password: </label><input type=”text” name=”password” /><br /><br />
<input type=”button” value=”Login” />
<a href=”#” id=”close” >Close</a>
</form>

 

You can see the demo and if you wish to download you can do it here!

Download   Demo

Also check the Demo of Popup with Background Overlay here:

Demo

Post Views: 865

67 thoughts on “A very Simple jQuery Popup ready to use Code!”

  8. Thank you for this great little script. I was just wondering how you would open the form if there were several buttons on the page that activated the pop up?
    The buttons will be dynamically created so I can’t hardcode different div id’s for them.Thanks for your help!

    Reply

    1. Yes, you can, Right now the popup will appear after you click the link (click event). You can just remove the click event to make it appear after the document is ready (loaded fully).

      Just comment line no. 5 and no. 8. see below:

      $(document).ready(function(){
      //open popup
      // $(“#pop”).click(function(){
      $(“#overlay_form”).fadeIn(1000);
      positionPopup();
      // });

      Reply

  19. Is there a way to modify the scripting so that the pop up appears next to the button that is launching it rather than in the centre of the page?

    Reply

    1. Yes, you can adjust the position: Copy the below jquery code, instead of the above.

      $(document).ready(function(){
      //open popup
      $(“#pop”).click(function(){
      $(“#overlay_form”).fadeIn(1000);
      });

      //close popup
      $(“#close”).click(function(){
      $(“#overlay_form”).fadeOut(500);
      });

      $(“#overlay_form”).css({
      left: 100,
      top: 100,
      position:’absolute’
      });

      });

      you can position it by changing the left and top values.

      Reply

    1. Replace the code(line 1 to 14 from above)

      $(document).ready(function(){
      //open popup
      $("#pop").click(function(){
      $("#overlay_form").fadeIn(1000);
      positionPopup();
      });

      //close popup
      $("#close").click(function(){
      $("#overlay_form").fadeOut(500);
      });

      $('body').mouseup(function(){
      $("#overlay_form").fadeOut(500);
      });

      $("#overlay_form").mouseup(function(e){
      e.stopPropagation();
      });

      });

      Reply

  21. This is great! One more addition. How could we set a Timeout, so that the popup closes automatically after 5 seconds? Thanks again for all the help!

    Reply

  23. Hello I was wondering how you can modify this code so that you can have more than 1 link with a popup box appear, Thank you!

    Reply

  25. This code is great! I have a question, how do you modify this code so that it can be used for more than one popup on a single page?

    Thank you!

    Reply

    1. Sorry, I didn’t see your reply from earlier. Thank you so much! I greatly appreciate you taking the effort to help me out!!!

      Reply

  26. great script!

    how can i allow the popup to have scrollbars for the content?

    i’m actually using it to hold some generated data that takes up a bit of space. but the data ends up going outside the popup div if it’s too long.

    i want to limit it to the dimensions given in the css and allow scrollbars if necessary.

    is this possible?

    thanks!

    Reply

  27. Never mind I figured it out. Just added

    overflow-y: scroll;

    to #overlay_form

    That’s CSS3 but you can of course use overflow: scroll and just end up with both scroll bars whether you need them or not.

    Reply

  28. Great Code!
    What’s the easiest way to get the page behind the box to fade-out, so the user is more focused on the pop-out?

    Thanks!

    Reply

      1. Awesome! It works on the page by itself, but I also want to make a few more adjustments to it like, for it to open on launch, and close if you close the background. But when I add those changes I lose the faded background?
        Here is what I got from previous comments and the download, Am I missing something? :

        $(document).ready(function(){
        //open popup
        //$(“#pop”).click(function(){
        $(“#overlay_form”).fadeIn(1000);
        $(“.background_overlay”).fadeIn(500);
        positionPopup();
        });

        //close popup
        $(“#close, .background_overlay”).click(function(){
        $(“#overlay_form”).fadeOut(500);
        $(“.background_overlay”).fadeOut(500);

        $(‘body’).mouseup(function(){
        $(“#overlay_form”).fadeOut(500);
        });

        $(“#overlay_form”).mouseup(function(e){
        e.stopPropagation();
        });
        });

        //position the popup at the center of the page
        function positionPopup(){
        if(!$(“#overlay_form”).is(‘:visible’)){
        return;
        }
        $(“#overlay_form”).css({
        left: ($(window).width() – $(‘#overlay_form’).width()) / 2,
        top: ($(window).width() – $(‘#overlay_form’).width()) / 7,
        position:’absolute’
        });
        }

        //maintain the popup at center of the page when browser resized
        $(window).bind(‘resize’,positionPopup);

        #overlay_form{
        position: absolute;
        border: 8px solid #545F7A;
        padding: 10px;
        background: #F0EAB5;
        width: 300px;
        height: 300px;
        z-index: 200;
        }
        #pop{
        display: block;
        border: 1px solid gray;
        width: 65px;
        text-align: center;
        padding: 6px;
        border-radius: 5px;
        text-decoration: none;
        margin: 0 auto;
        z-index: 100;
        }
        .background_overlay { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; background:black; opacity: 0.5;}

        I also think it would be cool if the box could float in the center of the page if someone where to scroll the main page? Any help doing that?

        Thanks again for your help!

        Reply

        1. I got it mostly figured out now, except the closing now won’t work at all…?

          Thanks again man this is sweet!

          Reply

  29. For something so simple, this was absolutely outstanding. I can use the dialog plug ins and such for jquery, but this was just so much easier and cleaner.

    I very rarely comment on posts, but this definitely called for it. Thank you for this, it is much appreciated. Keep up the great work!

    Reply

  31. This is a great popup! Thanks for sharing.
    One question… the links for the background overlay are no longer working. Is there any way that you can add that again?

    Thanks!

    Reply

  32. It was a great popup with simple code. Thanks!
    I do notice that the background overlay is not fading in IE8. However it works well in FF and Chrome. Any clue on why is it not working in IE8 ??

    Reply

    1. there is a style used for transparency
      opacity: 0.5

      Opacity will not work in IE, you need to update them
      New style:


      .background_overlay {
      position: fixed; left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 1;
      background:black;
      opacity: 0.5;
      /*newly added */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      }

      Reply

    1. there is a style used for transparency
      opacity: 0.5

      Opacity will not work in IE, you need to update them
      New style:


      .background_overlay {
      position: fixed; left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 1;
      background:black;
      opacity: 0.5;
      /*newly added */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      }

      Reply

  38. I have my pop ups located beneath an anchor a few divs down the page. When the pop ups are clicked, the page repositions back to the top and centers the pop ups accordingly within that new screen.

    Is there a way to keep the pop ups centered on the page no matter where down the page you’re currently viewing?

    (exact same issue as elvin@ccwebistes.net, but I can’t figure it out. Heh…)

    Reply

    1. Hi Robin,

      Its very simple, Just change position:’absolute’ to position:’fixed’ in the JavaScript part (line no. 24)


      $("#overlay_form").css({
      left: ($(window).width() - $('#overlay_form').width()) / 2,
      top: ($(window).width() - $('#overlay_form').width()) / 7,
      position:'fixed'
      });

      Reply

  39. fabulous………. no doubt….. very very best content and ….. also shortest one.. thanks alot for making this type blog to help people.
    About me?? Name: Girdhar singh M: +91-7838441471 feel free to contact for discussion. thanks again.

    Reply

  40. I have table where i want to show pop ups whenever the elements of the first column are clicked, I used the above code. But the pop up opens only for the first row and not remaining. :-(.

    Reply

  41. Thanks Can u explain how can i put pop up at the right side of my website……?with pop up box

    Reply

  44. Great – but it come up underneath some elements on the page! I’ve played with z-index but can’t cure it. Any ideas please. Thanks

    Reply

Leave a Reply

  • Archives

    • Theme: Overlay by Kaira. 
    Agurchand