CODEWITHSUNDEEP
javascriptjqueryhtmlmodal-dialog
user7592363
user7592363

Reputation:

How to disable clicks outside the modal when it is opened & re-enable clicks when modal is closed?

The modal is defined as:

<div class="moremodal" style="display:none;">
      <div class="modal-dialog modal-lg" style="width: 500px; border: outset; position: fixed; top: 25%; left: 35%;">
        <div class="modal-content" style="top:0px;"></div>
      </div>

Whenever someone clicks outside the modal, I have disabled the clicks so that the person is forced to choose any options from the modal before proceeding. (This does not work properly for some reason.)

$("*:not('.moremodal')").on("click",function(){
     return false;
})

But i want to re-enable clicks on the page after the modal is closed. How do I do that? And where should I call that function or write that code?

EDIT: There is only one modal which I populate.

Upvotes: 0

Views: 7283

Answers (6)

mtizziani
mtizziani

Reputation: 1016

<head>

  <style>
    .modal-container {
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,0.8);
      display: inline-block;
      position: absolute;
      top: 0;
      left 0;
      z-index: 100;
    }
    .modal-content {
      margin: 10%;
      backgrond-color: rgba(0,0,0,1);
      display: inline-block;
      width: 80%;
      height: 80%;
    }

    .hidden {
      display: none;
    }
  </style>
</head>

<body>
  <div> my normal content </div>
  <div>
    <button type="button" id="open-modal">open the modal</button>
  </div>

  <div class="modal-container hidden">
    <div class="modal-content"> 
      Here is your modal content
      <div>
        <button type="button" id="close-modal">close</button>
      </div>
    <div>
  </div>

  <script src="path/to/jquery/libraries/jquery.min.js"></script>
  <script>
    $(document).ready(() => {

      $('.modal-container').on('click', function(event){
        // stop bubbling on clicks
        event.preventDefault();
        event.stopPropagination();
      });

      $('#open-modal').on('click', function(){
        // show the modal
        $('.modal-container').removeClass('hidden');
        // disable body scrolling in the background
        $('body').css('overflow-x', 'hidden').css('overflow-y', 'hidden');
      })

      $('#close-modal').on('click', function(event){
        $('.modal-container').addClass('hidden');
        $('body').css('overflow-x', 'auto').css('overflow-y', 'auto');
      }
    });

  </script>
</body>

i think this logical code shows you how it can work. i've not tested it so i think the css part is not 100% correct.

Upvotes: 0

Udaya
Udaya

Reputation: 307

Simply you can use this

<a data-controls-modal="id" data-backdrop="static" data-keyboard="false" href="#">

Upvotes: 0

Zuks
Zuks

Reputation: 1307

Firstly change your selector into something like this (assign an id to the model for ease of selection):

$('body').click(function(evt){    

   //all elements except the modal and elements in the modal
   if(evt.target.id == "modal_id" || $(evt.target).closest("#modal_id").length > 0) {

       //if the modal is visible do nothing
       if($("#modal_id").is(":visible")) {
           return false;
       }
   }         
});

EDIT

If you are dealing with multiple modals and need to use the class selector:

$('body').click(function(evt){    

   //all elements except the modal and elements in the modal
   if($(evt.target).hasClass("moremodal") || $(evt.target).closest(".moremodal").length > 0) {

       //if there is a visible model do nothing
       if($(".moremodal").is(":visible")) {
           return false;
       }
   }         
});

Upvotes: 0

Jaydeep Mor
Jaydeep Mor

Reputation: 1703

Here two bootstrap modal.

1) Close when click on outside of modal. 2) Not close when click on outside of modal.

Hope it will help you.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Default Modal</button>
    
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
    
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    
      </div>
    </div>
    
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1" data-backdrop="static" data-keyboard="false" >Disabled outside click modal</button>
    
    <!-- Modal -->
    <div id="myModal1" class="modal fade" role="dialog">
      <div class="modal-dialog">
    
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    
      </div>
    </div>

Upvotes: 1

anand vishwakarma
anand vishwakarma

Reputation: 79

Use CSS property "pointer-event: none;" on modal overlay.

Upvotes: 0

Nirav Joshi
Nirav Joshi

Reputation: 2960

Use bootstrap modal and add this code you can entirely achieve your goal.

Hope this will helps you.

$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });
    
    $("#click-me").click(function() {
       $("#popup").modal("show");             
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
        </head>
    <body>
        <div class="modal" id="popup" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Title</h3>
            </div>
            <div class="modal-body">
                   **Your HTML goes here**
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <a id="click-me" class="btn btn-primary">Open</a> 
    </body>
        <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>

Upvotes: 0

Related Questions