I had popup working and I wanted to open popup from another popup where a link was placed inside first popup using jQuery. This kind of scenario is quite common. Most probable example we see are login and register popup boxes where one can toggle to login/register popup box through a link given in currently opened popup.
I’m mentioning the technique behind open popup from another popup in jQuery. You can place any kind of content in popups and apply style to them as well.
The HTML
We just need link/button on the page to open popup. The first line in the markup below places two links in our page to show the popup. Place the markup in body tag of your page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <a id="show_pop1" href="">POPUP ONE</a> | <a id="show_pop2" href="">POPUP TWO</a> <div id="popup1" class="popup"> <h3><a id="pop2" href="">Show popup two</a></h3> <hr /> <h1 align="center">POPUP 1</h1> <p align="justify">This is first popup. Place your content here.</p> <a class="close" href="">[ x ]</a> </div> <div id="popup2" class="popup"> <h3><a id="pop1" href="">Show popup one</a></h3> <hr /> <h1 align="center">POPUP 2</h1> <p align="justify">This is second popup. Place your content here.</p> <a class="close" href="">[ x ]</a> </div> |
Basic Styling
You need the following minimal CSS to let popup work. place these CSS in head section of your page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <style type="text/css"> .popup { display: none; background-color: #FFFFFF; position: fixed; top: 150px; padding: 40px 25px 25px 25px; width: 350px; z-index: 999; left: 50%; margin-left: -200px; } .pop_overlay{ height: 100%; width: 100%; background-color: #F6F6F6; opacity: 0.9; position: fixed; z-index: 998; } a.close{ color: #999; text-decoration: none; position: absolute; right: 15px; top: 15px; } </style> |
The Functions
We need to create some jQuery functions to let the links show popup. Since our code is dependent on jQuery so first add minified jQuery library through adding the following line before the end of body tag.
1 | <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> |
We have created three functions. These functions are self explanatory. Add the script just after the jQuery library we recently added and before end of body tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <script type="text/javascript"> jQuery(document).ready(function ($) { // Show the popup on click $('#show_pop1, #show_pop2').on('click', function (e) { $('body').prepend('<div class="pop_overlay"></div>'); if ($(this).attr('id') == 'show_pop1') $('#popup1').fadeIn(500); else $('#popup2').fadeIn(500); e.preventDefault(); }); // Open popup from link inside another popup $('#pop1, #pop2').on('click', function (e) { toFadeOut = $('#popup1'); toFadeIn = $('#popup2'); if ($(this).attr('id') == 'pop1') { toFadeOut = $('#popup2'); toFadeIn = $('#popup1'); } toFadeOut.fadeOut(500, function () { toFadeIn.fadeIn(); }) return false; }); // Close popup $(document).on('click', '.pop_overlay, .close', function () { $('#popup1, #popup2').fadeOut(500, function () { $('.pop_overlay').remove(); }); return false; }); }); </script> |
That’s it. Notice the link given at top of popup. Clicking on this will let the popup fade slowly and another will appear. Clicking at close button at upper right corner or out of the popup will hide the popup. A perfect sequence to open popup from another popup in jQuery!
Hi,
thanks for the great plugin. I have one issue… When I have two buttons that leads to the same form, the second doesn’t work. While trying to register, it returns the message that username cannot be empty (even if it is filled up). Is this some kind of known problem?
Thanks
Hi Milan,
The problem sounds known but I can’t answer without inspecting your code. Please provide a link to your page or write us at support@fellowtuts.com
Thanks