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.

<a class="open-button" popup-open="popup-1" href="javascript:void(0)">
Click Here To Open Popup 1</a>

<div class="popup" popup-name="popup-1">
    <div class="popup-content">
    <h2>Title of Popup 1</h2>
<p>Popup 1 content will be here. Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Aliquam consequat diam ut tortor 
dignissim, vel accumsan libero venenatis. Nunc pretium volutpat 
convallis. Integer at metus eget neque hendrerit vestibulum. 
Aenean vel mattis purus. Fusce condimentum auctor tellus eget 
ullamcorper. Vestibulum sagittis pharetra tellus mollis vestibulum. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="close-button" popup-close="popup-1" href="javascript:void(0)">x</a>
    </div>
</div>

As you can see above there is a popup open button, popup div and popup close button, popup-open, popup-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.

body {
    font-family:Arial, Helvetica, sans-serif;
}

p {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.5px;
    color: #484848;
}

/* Popup Open button */	
.open-button{
    color:#FFF;
    background:#0066CC;
    padding:10px;
    text-decoration:none;
    border:1px solid #0157ad;
    border-radius:3px;
}

.open-button:hover{
    background:#01478e;
}

.popup {
    position:fixed;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.75);
    width:100%;
    height:100%;
    display:none;
}

/* Popup inner div */
.popup-content {
    width: 700px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 40px;
    margin-top: 100px;
    box-shadow: 0px 2px 6px rgba(0,0,0,1);
    border-radius: 3px;
    background: #fff;
    position: relative;
}

/* Popup close button */
.close-button {
    width: 25px;
    height: 25px;
    position: absolute;
    top: -10px;
    right: -10px;
    border-radius: 20px;
    background: rgba(0,0,0,0.8);
    font-size: 20px;
    text-align: center;
    color: #fff;
    text-decoration:none;
}

.close-button:hover {
    background: rgba(0,0,0,1);
}

@media screen and (max-width: 720px) {
.popup-content {
    width:90%;
    }	
}

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.

<script>
$(function() {
    // Open Popup
    $('[popup-open]').on('click', function() {
        var popup_name = $(this).attr('popup-open');
	$('[popup-name="' + popup_name + '"]').fadeIn(300);
    });

    // Close Popup
    $('[popup-close]').on('click', function() {
	var popup_name = $(this).attr('popup-close');
	$('[popup-name="' + popup_name + '"]').fadeOut(300);
    });
	
    // Close Popup When Click Outside
    $('.popup').on('click', function() {
	var popup_name = $(this).find('[popup-close]').attr('popup-close');
	$('[popup-name="' + popup_name + '"]').fadeOut(300);
    }).children().click(function() {
	return false;
    });
	
});
</script>

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-open, popup-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.

Facebook Official Page: All PHP Tricks

Twitter Official Page: All PHP Tricks