Create a Popup Modal using jQuery

Demo Download

In this tutorial, we will Create a Simple Popup Modal using jQuery. You must have seen several times over the internet whenever you click on any button or link a popup appears with the detail information of that link.

Today we will learn how to create a popup model using CSS and jQuery. It is very simple to create a popup model, and it is very useful when you have great amount of content to display, you can easily display your content via popups.

You might like this Simple Dropdown Menu using CSS and jQuery.

Steps to Create a Popup Modal using jQuery

To create a popup modal we need to follow the below steps.

  1. Write an HTML Markup
  2. Write CSS
  3. Write jQuery

1. Write an HTML Markup

First we need to create an index.html file and paste the following HTML markup in its body section.

As you can see above there is a popup open button, popup div and popup close button,  popup-openpopup-name, and  popup-close all three attributes will have the name of popup, in this case you can see that i have written popup-1  in all these three attributes. Which means when you click on open popup button, it will open the popup and when you click on close button, it will close the popup.

You can create multiple popups on the same page just by changing names in all these three attributes  popup-open, popup-name, and  popup-close

2. Write CSS

Now we need to Style our popup, paste the following styles in CSS either in head section or you can also include external style sheet.

Above CSS is very simple, i have defined the popup open button styles, popup close button styles and popup main div and popup content div styles in it.

3. Write jQuery

Now come to the most important part of this tutorial, we will use jQuery to trigger the action whenever user either click on open popup button or close popup button. It will show and hide the main popup div and popup content div.

In the above script, i have clearly defined that when use click on popup-open or on popup-close it will get the name of popup and show/hide the popup div.

You may also noticed that when user click on .popup class which is the background of popup, a popup div will hide in this case too. Although your popup will work without this, if you do not like to hide popup on background click then  you can remove the last function which starting after  // Close Popup When Click Outside

Don’t forget to add the jQuery Library before the above jQuery script, jQuery library file is also available in the download of this tutorial.

Conclusion

Today we learnt how to create a simple popup model using CSS and jQuery, you can add multiple popups just by adding the HTML markup of each popup and changing names in all these three attributes  popup-openpopup-name, and popup-close

Demo Download

If you found this tutorial helpful, share it with your friends and developers group.

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Article By
Javed Ur Rehman is a passionate blogger and web developer, he loves to share web development tutorials and blogging tips. He usually writes about HTML, CSS, JavaScript, Jquery, Ajax, PHP and MySQL.

One Comment

  1. Hi,
    I want function convert amount in Hindi word like 1300 to “एक हज़ार तीन सौ!” using PHP + JQuery
    please help…….

Leave a Reply

Your email address will not be published. Required fields are marked *