How To Open Modal Using Jquery

by

In this tutorial, we will learn how to open a modal using jQuery. A modal is a dialog box or popup window that is displayed on top of the current web page. Modals are widely used in modern web applications to create a more engaging user experience by allowing the user to interact with specific content without having to leave the current page.

Prerequisites

  • Basic knowledge of HTML, CSS, and JavaScript
  • jQuery library

Step 1: Create the HTML structure

First, create a simple HTML structure for the modal. We will have a button to open the modal and a div that contains the modal content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modal using jQuery</title>
</head>
<body>
  <button id="open-modal">Open Modal</button>

  <div id="modal" class="modal">
    <div class="modal-content">
      <span class="close">×</span>
      <p>This is a sample modal content.</p>
    </div>
  </div>
</body>
</html>

Step 2: Add CSS styles

Next, add some CSS styles to style the modal and position it at the center of the screen:

/* Modal style */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

Step 3: Add jQuery

Now, we will add the jQuery library to our project. You can either download it from the official website or use a CDN (Content Delivery Network) link. In this example, we will use the Google CDN link:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Step 4: Add the jQuery script to open the modal

Finally, we will add the jQuery script to open the modal when the user clicks the “Open Modal” button:

<script>
  $(document).ready(function () {
    // Get the modal and button elements
    var modal = $("#modal");
    var btn = $("#open-modal");

    // When the user clicks the button, open the modal
    btn.click(function () {
      modal.show();
    });

    // Get the <span> element that closes the modal
    var span = $(".close");

    // When the user clicks on <span> (x), close the modal
    span.click(function () {
      modal.hide();
    });

    // When the user clicks anywhere outside of the modal, close it
    $(window).click(function (event) {
      if ($(event.target).is(modal)) {
        modal.hide();
      }
    });
  });
</script>

Conclusion

In this tutorial, we learned how to create and open a modal using jQuery. We have created a simple HTML structure for the modal, added CSS styles to style the modal, and finally added the jQuery script to open the modal when the user clicks the “Open Modal” button. This is a basic example, and you can customize the modal as per your needs and preferences.