How to create popup dialog in jquery


Popup dialog is used to interact with user without disturbing their workflow. You can see this popup window in many sites for example Facebook, twitter etc. Using this popup dialog you can show any notifications, messages and alert to your visitors. You can also place any kind of forms for example login form, register form in this popup dialog.

Let’s come to see how to create popup dialog in jquery. Before going to tutorial I want to confirm that you know html, css, JavaScript. If yes means you can understand it easily otherwise it will difficult to understand. To learn html, css, JavaScript please make use of the site


Step 1:

In first step you need to create html page. Here I give you simple html page in which I create one button. On clicking that button your popup dialog will open.

I also create overlay div to show background overlay.

I create popup dialog html code which is the important one because you are going to show and hide this section only.

Please take a look at the coding.

Step 2:

You need to create CSS file for that html page. For my html page I create CSS file which is in below. In that I create style for overlay and give transparency to it.

Also I placed the popup dialog at centre because you see mostly in all website it is centre only and also it is user compatibility.

Step 3:

This is the most important step because in this step only you are going to show your popup dialog using jquery. Already you created the html and CSS now you need to show your popup dialog by using jquery. For that you must include jquery library file because it is the required file without this jquery function should not work.

Now I am going to give you main script which is used to show and hide your popup dialog.

In the above script I used simple concept only that is when you click .click-me button .overlay and .pop-holder div will come and in that popup dialog close button i.e. X mark placed in top right corner on clicking this button popup dialog will close. Here I am using jquery function fadeIn and fadeout.

That’s it I hope you will get some knowledge through this tutorial and you will use this concept in your websites. Thank you.