Using jQuery to Generate Modal Pop-Up when Clicked

A modal box is a pop-up window that forces the user to interact with it before returning to the site. Modal boxes are useful for warnings, informational boxes, and more. You can create a modal box with jQuery. If you are not familiar with jQuery, check out our jQuery Basics article for an explanation of how jQuery works.

This is an interactive code display that shows you the HTML, CSS, jQuery, and a demo of the output.

Modal HTML

In order to create a modal pop-up, you first need to establish the HTML structure.

You need to create classes for the pop-up overlay and pop-up content so that you can edit them separately from the rest of the document.

<!--Creates the popup body-->
<div class="popup-overlay">
<!--Creates the popup content-->
 <div class="popup-content">
    <h2>Pop-Up</h2>
    <p> This is an example pop-up that you can make using jQuery.</p>
   <!--popup's close button-->
    <button class="close">Close</button>    
</div>
</div>

<h2>jQuery Pop-Up Example</h2>
<button class="open">Open</button>

This example creates the “popup-overlay” and “popup-content” classes to enable CSS to style it specifically.

Take notice of the button elements in this example. We added buttons that we want to trigger the pop-up. One button has been given the class “open,” while the other has the class “close.” These will be used later to open and close the pop-up.

Modal CSS

In the CSS, you must style the “popup-overlay” and the “popup-content” classes so that they are initially hidden. A pop-up wouldn’t be a pop-up if it was visible from the very beginning.  We can hide the pop-up by changing the classes’ visibility:

.popup-overlay {
visibility:hidden;
}

.popup-content {
visibility:hidden;
}

Now, we don’t want the pop-up to be hidden forever, so we need to make a special use case in the CSS for when the pop-up should be shown. We’re going to use jQuery to help determine when the pop-up should be visible.

jQuery has the ability add and remove classes based on actions (like clicking). So, if we program the jQuery to add a class called “active” when the “open” button is clicked, we can use the “active” class in CSS to show the pop-up. Append the “active” class to the pop-up classes and create a new styling for when the pop-up is visible.

See the example below to see how this CSS styling should look:

.popup-overlay.active{
visibility:visible;
}

.popup-content.active {
visibility:visible;
}

Modal jQuery

Now it’s time to add the jQuery. Be sure to set up your HTML document for jQuery before adding any jQuery code. If you are unsure how to do so, see our Getting Your HTML Ready for jQuery article.

So when the “Open” and “Close” HTML buttons are clicked, jQuery needs to add or remove the “active” class.

This first statement adds the “active” class when the “Open” button is clicked.

$(".open").on("click", function(){
$(".popup, .popup-content").addClass("active");
});

When this happens, the “active” class is appended to the pop-up classes, thus changing the pop-up’s visibility to “visible.” In other words, the pop-up will appear.

This second statement removes the “active” class when the “Close” button is clicked.

$(".close, .popup").on("click", function(){
$(".popup, .popup-content").removeClass("active");
});

When this happens, the “active” class is removed from the pop-up classes, causing them to revert to their previous styling that has the visibility set to hidden.

Add both statements of jQuery to your document. If all this is completed correctly, you will have a rudimentary modal pop-up box.