Bootstrap模式在其侧面单击时不会关闭

Question

Bootstrap modal does not close when clicked out side of it . I check out a few of questions but i don't find result that help me.

My JS code

Get the modal

var modal = document.getElementById('myModal');

Get the image and insert it inside the modal - use its "alt" text as a caption

var img = $('.myImg');
  var modalImg = $("#img01");
  var captionText = document.getElementById("caption");
  $('.myImg').click(function(){
      modal.style.display = "block";
      var newSrc = this.src;
      modalImg.attr('src', newSrc);
      captionText.innerHTML = this.alt;
  });

Get the element that closes the modal

var span = document.getElementsByClassName("close")[0];

When the user clicks on (x), close the modal

span.onclick = function() {
    modal.style.display = "none";
  }`

My HTML:

<div class="col-12 col-md-4">
                <img class="myImg img-product img-center" src="img/necklaces/1.jpg">
            </div>

<div id="myModal" class="modal">
    <!-- The Close Button -->
        <span class="close" style="color: white;" onclick="document.getElementById('myModal').style.display='none'"><i class="fa fa-times" aria-hidden="true"></i></span>
    <!-- Modal Content (The Image) -->
        <div class="modal-content">
            <p class="modal-title">Molekula no. 2 </p>
            <img class="modal-content" id="img01" style="border: none;">
        </div>
    <!-- Modal Caption (Image Text) -->
        <div id="caption"></div>
</div>

Please help me. Thx.

Answer 1

You can do that using $(document).click(function(e) {}); ,when e is the clicked element so with that function we can do this :

check the clicked element class name if is inside the model return else if the clicked element is the close span then close model else if non of the above close the model

 $(document).click(function(e) { var target = $(e.target); var eclass = target.attr('class'); if(eclass == "close"){ $(".model").hide(); } else if(eclass == "model" || eclass == "modelimg" || eclass == "caption"){ return; } else{ $(".model").hide(); } }); 

 .container{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 500; position: fixed; } .model{ z-index: 1000; top: 5px; position: absolute; background-color: white; overflow-y: auto; overflow-x: hidden; width: 150px; height: 150px; right: 30%; box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 1); text-align: center; border-radius: 3px; } img{width:100%;} .close{ position:absolute; right:5px; top:5px; background:white; cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div class="container"> <div class="model"> <img class="modelimg" src="https://media.nationalgeographic.org/assets/photos/000/285/28537.jpg" alt="This is the moroccan sahara" /> <div class="caption"> <span class="caption">The morocan sahara</span> </div> <span class="close">X</span> </div> </div>