1. Home
  2. Third-Party Integration
  3. jQuery
  4. Using jQuery to Generate Modal Pop-Up when Clicked

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.

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.

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;
}

If you named your classes differently, be sure to replace .popup-overlay and .popup-content with your class names.

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;
}

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.

jQuery is an open-source software permissive under an MIT license. jQuery is not a product of Pair Networks, Inc., and Pair Networks provides no warranty for jQuery. Please note that there are many levels of javascript libraries available. Please consult with your IT professional for advice and guidance on an appropriate library. This specific product may or may not meet your needs. Pair Networks, Inc. is providing support for this tutorial for your convenience and is not responsible for jQuery's performance. Please read carefully the terms and scope of services for any online service or product you are considering purchasing or using.

Updated on April 25, 2022

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support