Open popup from another popup in jQuery

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.

Open popup from link inside another popup window


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.

Basic Styling

You need the following minimal CSS to let popup work. place these CSS in head section of your page.

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.

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.

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!

You Might Interested In


  1. Milan says:


    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?



Leave a Reply

Enclose a code block like: <pre><code>Your Code Snippet</code></pre>.