Creating jQuery Popup Div

By on

Jquery popup is the most popular and cool jquery effects for websites, as a web developer or designer we can apply this cool jquery effects very easy in our projects, we can search and download, using third party jQuery plugins. If your wonder on how to create a popup div in your own hand. In this tutorial I would like to share on how to create a pop up div effect using the popular jQuery library.

In this jquery example we create a popup div in ‘on click trigger’ event, that pop up displays with opacity background and it will remains center the popup if you scrolling zoom out the browser and closing it fadeout, and also you can customize the content of the popup div for your cool website designs. Let’s begin.

View Demo | Download Source

1. Creating the Page Template

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creating Popup Div | istockphp.com</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
	<a href="#" class="topopup">Click Here Trigger</a>
    
    <div id="toPopup"> 
    	
        <div class="close"></div>
       	<span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
		<div id="popup_content"> <!--your content start-->
            <p>
            xPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, 
            feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
            vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, 
            commodo Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique 
            senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, 
            feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
            <br />
            <p>
            Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
            vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, 
            commodo Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
           
            <p align="center"><a href="#" class="livebox">Click Here Trigger</a></p>
        	
        </div> <!--your content end-->
    
    </div> <!--toPopup end-->
    
	<div class="loader"></div>
   	<div id="backgroundPopup"></div>
</body>
</html>

In index.html, we include the css, jquery script and js script after the title tag; in the body we have 3 div containers for popup div event.

  • div container for loading
  • div container for popup background,
  • and div container for popup

2. The stylesheet

style.css

#backgroundPopup {
    z-index:1;
    position: fixed;
    display:none;
    height:100%;
    width:100%;
    background:#000000;
    top:0px;
    left:0px;
}
#toPopup {
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 10px solid #ccc;
    border-radius: 3px 3px 3px 3px;
    color: #333333;
    display: none;
    font-size: 14px;
    left: 50%;
    margin-left: -402px;
    position: fixed;
    top: 20%;
    width: 800px;
    z-index: 2;
}
div.loader {
    background: url("../img/loading.gif") no-repeat scroll 0 0 transparent;
    height: 32px;
    width: 32px;
    display: none;
    z-index: 9999;
    top: 40%;
    left: 50%;
    position: absolute;
    margin-left: -10px;
}
div.close {
    background: url("../img/closebox.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 30px;
    position: absolute;
    right: -27px;
    top: -24px;
    width: 30px;
}
span.ecs_tooltip {
    background: none repeat scroll 0 0 #000000;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    display: none;
    font-size: 11px;
    height: 16px;
    opacity: 0.7;
    padding: 4px 3px 2px 5px;
    position: absolute;
    right: -62px;
    text-align: center;
    top: -51px;
    width: 93px;
}
span.arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #000000;
    display: block;
    height: 1px;
    left: 40px;
    position: relative;
    top: 3px;
    width: 1px;
}
div#popup_content {
    margin: 4px 7px;
    /* remove this comment if you want scroll bar
    overflow-y:scroll;
    height:200px
    */
}

In the css, if you want scrollbar in the popup just remove comment in line 74.

3. The jQuery script

script.js

jQuery(function($) {

	$("a.topopup").click(function() {
			loading(); // loading
			setTimeout(function(){ // then show popup, deley in .5 second
				loadPopup(); // function show popup
			}, 500); // .5 second
	return false;
	});

	/* event for close the popup */
	$("div.close").hover(
					function() {
						$('span.ecs_tooltip').show();
					},
					function () {
    					$('span.ecs_tooltip').hide();
  					}
				);

	$("div.close").click(function() {
		disablePopup();  // function close pop up
	});

	$(this).keyup(function(event) {
		if (event.which == 27) { // 27 is 'Ecs' in the keyboard
			disablePopup();  // function close pop up
		}
	});

        $("div#backgroundPopup").click(function() {
		disablePopup();  // function close pop up
	});

	$('a.livebox').click(function() {
		alert('Hello World!');
	return false;
	});

	 /************** start: functions. **************/
	function loading() {
		$("div.loader").show();
	}
	function closeloading() {
		$("div.loader").fadeOut('normal');
	}

	var popupStatus = 0; // set value

	function loadPopup() {
		if(popupStatus == 0) { // if value is 0, show popup
			closeloading(); // fadeout loading
			$("#toPopup").fadeIn(0500); // fadein popup div
			$("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
			$("#backgroundPopup").fadeIn(0001);
			popupStatus = 1; // and set value to 1
		}
	}

	function disablePopup() {
		if(popupStatus == 1) { // if value is 1, close popup
			$("#toPopup").fadeOut("normal");
			$("#backgroundPopup").fadeOut("normal");
			popupStatus = 0;  // and set value to 0
		}
	}
	/************** end: functions. **************/
}); // jQuery End

In the click event we triggered the loading() function and delay 0.5 second and triggered the loadPopup() function and the pop up displays. We add little more for closing the popup, if hover the ‘Close’ the tool tip message will appeared and keyboard event for close.

4. Done

We’re done, we learn one of jquery example on creating our own popup div using jQuery, and you can edit the content of the popup like adding more text, registration form and image. Let’s have a look at what we’ve achieved:

  • We create popup div without third party plugin
  • Works in old IE browser, IE 7,8
  • We add little feature, hover tool tip and keyboard event

Like this tutorial? Give it thumbs up and share it :)

  • Mr G

    Nice code but how would i trigger an asp.net server side button from within the popup

  • in.rothny

    How make Scroll Bar in this PopUp ?

    • http://istockphp.com istockphp

      hello in.rothny, the post is update, in css remove the comment in line 74, the scroll bar will appear.

  • chathu

    great tutorial

    • istockphp

      thanks.

  • Alef

    thanks a lot .. it’s a great post :)

    • http://istockphp.com istockphp

      thanks.

  • Sathya

    your pop up is working nice. thank you

    • http://istockphp.com istockphp

      thanks

  • http://www.exposl.info/ exposl

    how can i use this with two pop ups, i need two pop ups on the web page .

    • http://istockphp.com istockphp

      hello, you can duplicate the div tag/element. or modify the code if you want.

  • http://www.osipage.com Nick Jones

    It is awesome. Really useful post for jquery learners.

  • http://joglohosting.com/ Joglomedia

    great tutorial, how i can trigger the popup once the page is laoded not clicking the button/text?

    regards

    • http://istockphp.com istockphp

      Hello, in script.js line 3-9

      replace this code

      loading();
      setTimeout(function(){
      loadPopup();
      }, 500);

      please support us our facebook or twitter page.

      http://www.facebook.com/pages/Istockphp/235451993242578
      http://twitter.com/istockphp

      • Mike Bongiovanni

        replace it with????? (to load popup when page loads) ???

      • Mike Bongiovanni

        Can you tell us what to replace the code with ? to make it popup automatically?? thanks so much!

  • Rakesh

    Hi,

    How to close div on clicking of outside the div. Instead of clicking on close button or pressing Esc Button.

    If you have any idea please reply me on my mail.

    Thanks

    • http://istockphp.com istockphp

      hello, the post is update, the popup is close by clicking the background. thanks for your comment.

  • RW

    This is such a great post. Very simple to understand. I’ve tried everything but am attempting to show 3 instances of this effect on the same page. Cannot. I’ve duplicated each DIV ID and created additional styles for the second ID. It’s only showing the first content DIV.

    Can you display quick example?

    Thanks,
    Bob

  • RW

    thanks so much! worked great! I’m sorry but I have two final questions.

    1] I’m using this example where I have three links/buttons side by side. Each one will trigger a different popup div. The popup divs are all have the same location overlaying the buttons, but I would like the active button to have a higher z-index than the other buttons and a higher z-index than the popup div.
    So if button a is clicked, buttons b and c are hidden by the popup div but button a is visible over the popup div since it has a higher z-index.
    I know jquery can do this, but I couldn’t make it work with your script. Maybe it’s too complicated…

    2] Does the popup div have to be static content or can it load dynamic content, like a post excerpt?

    Thanks so much!
    Bob

  • RW

    oops one last question… I’m using background image:none for the popup background so that you can still see the button links. Isn’t there a way to keep the state active with jquery so that you can tell you’re still on that active link?

    Thanks,
    Bob

  • http://www.tripleo2013.com/scin_sechdule.html Sanjay Kataria

    Thanks :)

    I have help on this page…

  • http://www.saeedministries.com Foad R Shariat

    Hi,

    I’m trying to use your popup inside a repeater that gets it’s data from a database and whenever the popup shows it always shows the same data of the first datafield.

    How can I use it, that whenever I click a link on the repeater it show the popup div related to that data.

  • http://petenaylor.net Pete Naylor

    Hi there, love this script! One question I have is that is there a way to close the one popup automatically when you click on another div? At the moment, you have to click the close cross to open another popup.
    Thanks
    Pete

  • RW

    Thanks so much! Big help…

  • RW

    I have the same question as Pete. My customer doesn’t like that you have to x-out the one div before you can click on another popup. Is there a second function we can add to the button, to check if a div is already opened, then close it to open the second Div?

    Thanks,
    Bob

  • RW

    Thanks for your help. Unfortunately, your changes made the other buttons disappear. I’d like it so if you click on a secondary link, while one of them is already open, it opens up the secondary popup. See my jsfiddle.
    http://jsfiddle.net/bwilkins/dvk9f/

    Thanks,
    Bob

    • http://istockphp.com admin

      hi bob, sorry i send a wrong file, actually i finish this yesterday.

      http://istockphp.com/snippets/popup-div-with-jquery-req2.zip

      • RW

        Awesome fix! The function is working fine now. Unfortunately, there’s a weird action going on when a new div is activated. If I have Popup1 open, and I click the button to open Popup2, it flashes Popup2 briefly underneath Popup1 and then it shows in its proper place/

        Please see the jsfiddle here.
        http://jsfiddle.net/bwilkins/dvk9f/

        Thanks,
        Bob

  • http://www.saeedministries.com Foad R Shariat

    I have asked you this question before but you didn’t answer me,

    I’m trying to use your popup inside a repeater that gets it’s data from a database but whenever the popup shows it always shows the same data of the first datafield.

    How can I use it, that whenever I click a link on the repeater it show the popup div related to that data.

    Please help me on this topic, I want to use it in my project…

    • RW

      Foad, I wonder if you’re putting the same DB call in each of the popup divs? You probably need to ask for different DB table, or ID. I’m doing something similar.

      ...

      • http://www.saeedministries.com Foad R Shariat

        check this webpage out that I have designe, click on More… and you can see the same div for both, but actualy they have different datas.

        Please tell me where to change the code and what to do…?

        http://www.saeedministries.com/En/Testimony.aspx

        • Irman

          Hi. I’m trying to do what FOAD is trying to achieve. I got the same problem as him. Anyone got this solved? I read online and its true that it is the ID issue. Some say, change the ID to class but still doesnt work for me. Anything that i miss out to make what FOAD is trying to achieve?

    • http://istockphp.com admin

      hi Foad, sorry for trouble, i think this is the solution

      http://istockphp.com/snippets/popup-div-getting-dynamic-content.zip

      i coded in php, hopes this helps :)

  • RW

    looks like this stripped my code…


    $post_id = xxxxx;
    $queried_post = get_post($post_id);...

    The other thing I noticed from the original code sample is that we’re repeating the same DIV ID on the same page. This isn’t a great practice to my knowledge. I changed
    to and changed the styles accordingly in my CSS.

  • http://www.exposl.info chumego

    This is not working for two pop ups in Single page. please check. thanks

  • RW

    got it! i have my various #toPopup divs position changed to “fixed” rather than “relative”. With my layout, fixed doesn’t work, so I tried “absolute” and it works great!

    Thanks so much for your great script and support!!!
    Bob

  • http://www.gutscheincloud.info gutscheincloud

    Hi I am trying to use this div popup for my new side, i am getting content via loop and php (like: ) . I will get 1-10 diffrent infos on one side and i would like to show the content via several popups. However by now it shows always the first content in alle popup div…..

  • http://xieontech.com sham

    Hi..

    It’s working fine in chrome, firefox, opera.
    But problem in internet explorer 6..

    • http://istockphp.com admin

      IE6 is dead. lol

  • hosein

    hi all

    anybody have idea to use this popup for IE 9 or higher ?

    • http://istockphp.com admin

      hi the pop up is works fine in IE9, what’ the problem?

  • Hariprasad

    Thanks it’s helped me lot…….

  • Benjamin

    Hello,

    Thank You kind sir for your script, I have one question I am working on a theme template that I will be introducting JQuery & need it to popup all sorts of php code amoung it e.g userid , username , ip, bonus points and more just wondering if I can import my php && mysql code within a pop up ?

    Cheers,

    Benjamin

  • http://shout-about.com Pete Naylor

    Hi there, do you have a version that allows an infinite number of popups?

  • http://shout-about.com Pete Naylor

    Hi there

    That’s for multiple popups, is there a way of changing this to unlimited values?

  • Ahmed

    Hello,

    I need to open multiple pop-up windows in the same page.
    For e.g:

    –href=”#” class=”topopup”– Click Here Trigger –a–

    At the href, i would like to call another page content to be opened in the Popup.. How can i do that..

    Your help is appreciated

  • Julien

    Good job man as I have been working on that jquery popup dialog but could nt figure out the css modyfing. Simple and straight forward tutorial. Thank a bunch.

  • Francesc

    hi how i can dissolve the popup?

  • Hussain

    Hi,

    How can I call this popup using a js function instead of using href?

    Thanks,

  • Akhilesh

    The Pop up is not working in IE9. Any fix? It is being displayed at the bottom when i called the pop up

  • sahar

    Hello,
    tank u , your pop up was really good, but i’d like to use it in another way, i mean i want to create this pop up runtime(everywhere i need with sending params to it) and create this pop up with jquery, not html, how can i do this??

  • Frank

    Hi,
    I am trying to use this popup to replace the alert() method from javaScript code. Therefore I got rid of the jQuery(function($) {

    });
    andreplaced the

    $(“a.topopup”).click(function() {

    with just

    function openPopup(confirm, message) {

    }

    In debugging when invoking the openPopup method every line of code gets executed and there are no errors, but the div won’t show…

    can you explain that for me (and prior to that understand the issue I’m having)

  • Nuri

    Hello,
    Thanks for your work. What I want to point is after popup is visible and background div covers the rest, still a user may use tab and can activate the trigger which is behind the background div. Maybe we can use property disable on all the remaining divs while popup is appearing, any other neat solution. Thanks again.

  • Rohan

    Very nice tutorial. Helped a lot. Thanks

  • Nathan

    This is absolutely brilliant!! But…. how do I go around doing this with a button press? For example, I press ‘|’ (shift and back slash) then the popup window appears? Im trying to do this so an admin would press this button for a pop up DIV where he would be able to log in etc. Many thanks, Nathan

    • axlmulat

      hello, try this…

      $(window).keyup(function(event) {
      if (event.shiftKey && event.which == 220) {
      alert(‘hello’);
      }
      });

      • Nathan

        Oh thanks axlmulat for your reply. I can do that but I don’t now how to change it from a alert to a pop up div which includes the login form.

  • thuta

    You are the best :) Thanks so much.

  • axlmulat

    hi Tahir, do you mean, if pop up once, if close popup, never popup again? only popup once?

  • Raju Kumar

    thanx . this works good

  • sit_ubu_sit_good_dog

    OK, i’m beyond lost on this whole thing. I did the following verbatim, added it to my concrete5 html editor and nothing happens.

    First: Downloaded source of all materials like js, css etc to my computer. Ok sounds easy enough. Done.

    Next: Uploaded the JS , CSS and the gif files to my websites FILE MGR.

    Next: copied / pasted from wordpad the index.html code from the original index file onto the websites html editor so this way I could change the ipsum dumsum blah blah and actually add my own words. *AGAIN, EASY THERE*

    From here on is where I get confused.. I assume after copying the ORIGINAL html file all the script lines of the CSS and JS in it should point correctly to the js / css / gif files I originally uploaded.

    So, I hit the finish editing, and all it does is break the concrete5 editor because of the script not being correct and I have to totally delete the webpage where I am putting this all on..

    So, then I got a little crafty and began thinking, ok these code lines from the originators Index html were wrong:

    *ORIGINAL*

    *Original*

    So, in my concrete5 html editor, the link href I pointed it to where the file was resting on my websites folders *I’ll leave that info out where exactly the files point in the folders on the website so i’ll put blah blah*

    *MY EDIT*

    And I also did the exact thing with the script .js file

    Now, Ironically I had to point the . js file to point it exactly where it was on the website before when I once used a script on my website so I figured hell i’ll do it.

    Ok, done with my edits, hit save edits on my concrete5 html editor to see what it did and poof.. Same as before, breaks the html editor on concrete5 and I have to again delete the whole page of where i’m adding info *the page name is job postings* and start over.

    So here is my days of trying to get this right and failed every time questions.

    1. All I want is where a nice centered pop up pops up *like how the above demo works, and THAT is perfect and that’s all I WANT!* to pop up when someone hits a button *button is not on the original html above, just click me hyper link

    2. To add my bulleted description of the job inside the pop up and a email button to where people can email us *mailto script*

    3. I do NOT want the extra alert window pop up that says “HELLO WORLD” I don’t even need that extra trigger me hyperlink at the bottom of the page that leads up to the alert popup window , just a email button so they can email me.

    In reality folks, i’ve been trying to get this to work for days and days, and nothing works for me. Maybe i’m dumb and don’t get this java / css stuff as much as all of you do, but all I wanted was a nice little pop up like this to work and have my edited words inside it with a email button . And when they are done looking at it, can hit the close button and poof.

    How hard is this?? Why won’t this work with me? Is it Concrete5 not letting me do it? How to do this step by step would be nice.

    This pop up as I keep saying, is Perfect and is what I need. Any help would be greatly appreciated.. Thank you for my long winded outcry.

    • axlmulat

      helo, the pop is work fine. modify the code if you want.

  • Aparajita Sinha

    Hey.. implemented your code in one of my applications, it’s working fine in Chrome and FireFox but Not in IE. Can you suggest some solution??

    • axlmulat

      it works fine in IE 7,8,9, in think in ie 6 not work, do you use ie 6 ?

      • Aparajita Sinha

        Using IE9. Its working now… There was a small mistake in the code that i modified.. Thanks a lot for this post… It was of great help… :)

  • estefania

    hi, thanks for the post, i have a problem, though…

    I have a list of items, and i want that, when i click one of them, the info shows at the popup… how can i do this?

    thank you and best regards

  • Mike Bongiovanni

    I know you said to make this happen (popup automatically) – change lines 3-9, but can you tell me what to change it to? (to Make PoPup Automatically, No Click Required) ????????? :)

  • Binoy Kumar Baranwal

    Very Simple Stuff!

  • Riccardo

    Hi, thanks for this plugin…I tried to download the “popup-div-getting-dynamic-content” but when i try to open it in my localhost it says:
    Warning: mysql_connect(): Access denied for user ‘root’@’localhost’ (using password: NO)
    I really want to make this work for a list of images since I’ve styled it already…but it’s not working! Any help would be great, thanks

    • axlmulat

      upload the create a database and upload the sql file,

  • krishna

    Nice job. i have been searchging what it is exactly. it’s quit simple and easy to get …….Thank you

    • axlmulat

      Welcome krishna. please support our fan pages.

  • axlmulat
  • Peter Rafeiner

    How would I go about using onMouseOver instead of clicking?

    • axlmulat

      hi peter, replace this click function…

      $(“a.topopup”).click(function() {
      loading(); // loading
      setTimeout(function(){ // then show popup, deley in .5 second
      loadPopup(); // function show popup
      }, 500); // .5 second
      return false;
      });

      To…

      $(“a.topopup”).mouseover(function(){
      loading(); // loading
      setTimeout(function(){ // then show popup, deley in .5 second
      loadPopup(); // function show popup
      }, 500);
      });

  • axlmulat

    welcome

  • Warlock

    can i use it at my will?

    • axlmulat

      yeh. you can edit the code all you want, but don’t copy my content. :)

  • Felipe C

    Hey Man great work. i managed to make it “dynamic” changing some things, please take a look

    http://jsfiddle.net/d4rk50ul1/99weL/2/

  • EvenUP app

    Great Job, Thanks!! but I have a little problem, when the content of the
    pop-up is bigger than the window size, the horizontal scrollbars
    doesn´t appear on the popup and therefore there is content on it, that remains hidden. How can I solve it?
    Thanks a lot

  • DR

    Is it possible to have another html or php file display as the popup? Rather than create a form in index.php (as in popup-div-form) I want form.php to appear as the popup. I have attempted to use and have studied popup-div-getting dynamic-content but without luck. Thank you.

    • axlmulat

      hi, i think you use i frame?

  • Jeremy

    Think you!
    I need it!

  • axlmulat

    thank you for your feedback. at this point, the popup is not responsive yet. but will update this to responsive :)