How to Close Modal on Click Outside Using jQuery

by

The Modal hides by clicking a close button. But in most cases, you need to close the modal on click outside anywhere. According to your need, this tutorial is shared with free source code to implement it using jQuery. Therefore, You will easily integrate into your project.

As you know that the modal is just like a container that contains the text, images, or any other information. By default, It is hidden. Whenever it is clicked, it will display. again it will be hidden by clicking the close button. So, you will learn here all these processes with the best example.

close modal on click outside anywhere using jquery

Close Modal on Click Outside Anywhere with jQuery

Now, we are going to start coding for the closing modal click outside anywhere. Here, we will write implement for only a single modal. After learning it, you can easily integrate it into your project for multiple modals.

Before better standing, you should have a good understanding of jquery topics like selectors, events, hide(). show(), & more. Even you should know basic of HTML & CSS. So that, you configure all the next steps in a better way.

Learn Also –

jQuery Form Validation before Submit

How to Trigger Click Event on Pressing Enter Using jQuery

1. Create the Modal Using HTML

In this step,  We will create only a single modal for the learning purpose. After that, you can create more than one modal base on your project requirement.

To create a modal, you will have to go through the following steps –

  • Create an HTML button with id="modal-btn" to open the modal on clicking it.
  • Create a parent div with class="modal-box" and id="modalBox" and also create more elements within it from the next steps
  • Also, create a child div with class="modal-content"
  • Creat div class="close" to make a button for closing the modal.
  • Write some line of text like title, paragraph, list, or you need
  • Write CSS code to design modal for looking more attractive.

File Name – index.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
  .modal-content .close{
 position: absolute;
 right: 0px;
 top: 0px;
 background: #0e76a8;
 color: white;
 padding: 2px 6px;
 cursor: pointer;}
#modal-btn{
 border: none;
 padding: 10px 20px;
 font-size: 18px;
 background: #31a0d5;
 color: white;
 margin: 20px;
 cursor: pointer;}
#modal-btn:focus{
 outline: none;
 cursor: pointer;}
.modal-box{
 position: absolute;
 left: 37%;
 top: 10%;
 width: 400px;
 height: 250px;
 background-color: #31a0d5;
 box-shadow: 0px 0px 15px #00000026;
 display: none;}
.modal-content h3{
 text-align: center;
 color: white;
 font-size: 25px;}
.modal-content ul{
  position: relative;
  left: 80px;
  font-size: 20px;
  color:white;

}
</style>
</head>
<body>

<!--====HTML modal start===-->
<button id="modal-btn">Open Model</button>
<div class="modal-box" id="modalBox">
  <div class="modal-content">
    <div class="close">X</div>
     <h3>This is Model</h3>
    <ul style="list-style-type: none">
    <li>Easy to Learn</li>
    <li>Attractive Modal</li>
    <li>Free Source Code</li>
    </ul>
 </div>
</div>
<!--====HTML modal end===-->

<!--jquery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- custom jquery link-->
<script type="text/javascript" src="custom.js"></script>

</body>
</html>

 

3. Close Modal on Click outside Using jQuery

To close modal on click outside, write the jquery code according to the following steps –

  • Apply the click event on #modal-btn and show the modal using $('#modalBox').show()
  • Apply the click even on the close button and write the script to close the modal.
  • Also, apply the click even on document and write the code for clicking anywhere except the model section.

File Name – custom.js

$(document).ready(function(){
   $('#modal-btn').on('click', function(){
   $('#modalBox').show();
   });
  // close modal on clicking close button
  $('.modal-content').find('.close').on('click',function(){
   $(this).parents('#modalBox').hide();
  });
  // close modal on click outside at anywhere
  $(document).on('click',function(e){
    if(!(($(e.target).closest("#modalBox").length > 0 ) || ($(e.target).closest("#modal-btn").length > 0))){
    $("#modalBox").hide();
   }
  });
});

 

Don’t forget to include custom.js & jQuery CDN in the index.php just above the </body> tag.

My Suggestion

The above tutorials have learned you how to close the modal on click outside anywhere using jQuery, Now, you can easily implement it with different types of modal.

If you have any questions, you can ask me through the below comment box. Even you can suggest topics related to web technology.

I will share more tutorials with the best concept & Standard coding. So, you should visit my blog to become an expert in the coding field. Even share with your friends those who need it.