Close Modal on Click Outside Anywhere Using jQuery

The Modal hides by clicking a close button. But Most of the cases, you need to close 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

How to Close Modal on Click Outside Anywhere

Before getting started, See the following jQuery script. It will hide the modal on click anywhere outside. This is just a sample to directly use into your project.

// close modal on click outside at anywhere
$(document).on('click',function(e){
  if(!(($(e.target).closest("modal_selector").length > 0 ) || ($(e.target).closest("modal_btn_selector").length > 0))){
  $("modal_selector").hide();
 }
});
  • modal_selector – Replace it with the sector name of your modal box.
  • modal_btn_selector – replace it with the selector name of a button that will be used to open the modal.

You can also use the above script to close any image, text, div, section, or any other HTML element. It will work just giving the selector name to the above script.

Now, Configure the following steps. These steps will learn you how to close a modal on click outside anywhere. All the steps are easy to understand & learn.

1. Create the Modal Using HTML

Write the following HTML code to create a model and a button. The button will be used to open the modal. It will work using jQuery that is given in step- 4

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

2. Design the Modal Using CSS

Write the following CSS code to design the modal box. Even you can add more CSS code according to your requirements.

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

}

 

 

3. Close Modal on Click outside Using jQuery

  • First of all, you have to include the jQuery Library CDNBecause of the following script does not work without it.
  • Write the jquery script to show the modal. It will work whenever you click the button
  • Also, write the jquery script to hide the modal. It will work whenever you click the cross button
  • Write the jquery script to hide the modal. It will work whenever you click outside anywhere.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(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();
   }
  });
});
</script>

 

Complete Source Code to Close Modal on Click Outside

You can use the following complete source code. It contains all the codes such as HTML, CSS, & jQuery.

<!DOCTYPE html>
<html>
<head>
<style>
.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>

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


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

<script>
$(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();
   }
  });

});
</script>
</body>
</html>

 

Recommended Topics:

Real-Time Form Validation Using JQuery

How to Trigger Click Event on Pressing Enter Using jQuery

 

Suggestion:

The above tutorials has learned you how to close modal on click outside anywhere using jquery, Now, you can easily implement it with different types of the 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.

Leave a Comment