How to make modal close on click outside

后端未结

关注

 7  699

误落风尘

I have used this JavaScript below:

相关标签:

7条回答

庸人自扰

2020-12-19 02:41

This seemed to be the code that worked out for me in the end:

$(document).click(function (e) {
    if ($(e.target).is('#openModal')) {
        $('#openModal').fadeOut(500);
    }

});

$("#modalNo").click(function () {
    $("#openModal").fadeOut(500);


});
$(".close").click(function () {
    $("#openModal").fadeOut(500);
});
$(".close-circle").click(function () {
    $("#openModal").fadeOut(500);
});

0 讨论(0)

佛祖请我去吃肉

2020-12-19 02:47

This is working for me: I have an image inside of the modal window, so if someone click outside the image (centered):

html code:

<div id="modal_div"><img id="image_in_modal_div" src="image.jpg" /></div>

ccs code:

#modal_div {
        display: none;
          position: fixed; 
        z-index: 1; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
          background-color: transparent;
}

#image_in_modal_div {
       left: 50%;
       top: 30%;
       position: absolute;
}

mixed jquery and javascript code:

$( document ).ready(function() {

    $("#element_that_opens_modal").click(function(){
        $("#modal_div").show();
    });

    window.onclick = function(event) {
       if (event.target.id != "image_in_modal_div") {
          $("#modal_div").hide();
       }
    }

});

0 讨论(0)

误落风尘

2020-12-19 02:52
Adding to this for future readers.

Another way to dismiss the modal when clicking outside involved taking advantage of the bubbling nature of the javascript events.

In a typical modal HTML structure
```
<body>
  <div id="root">
    -- Site content here
  </div>
  <div id="modal-root">
    <div class="modal"></div>
  </div>
</body>
```
clicking on .modal will cause the click event to propagate like this .modal -> #modal-root -> body while clicking outside the modal will only go through #modal-root -> body.

Since we can stop the propagation of click events completely, and if that does not interfere with any other code, we only need to listen for click events in both .modal and #modal-root. A "modal-root" click will dismiss the modal, and a "modal" click will stop propagating the click event so never reaches the "modal-root".

For extra clarity, here's the code working in codepen.io: https://codepen.io/nbalaguer/pen/PVbEjm
0 讨论(0)
发布评论:

提交评论
- 加载中...

一生所求

2020-12-19 02:55

$('body').on('click', '.modal-open', function(e) {
    
    $('.modal-background, .modal').show();
    e.preventDefault();
})
.on('click', '.modal-close', function(e) {
    
    $('.modal-background, .modal').hide();
    e.preventDefault();
});

if ( !$('.modal-background.modal-close').length ) {
    $('<div/>').addClass('modal-background modal-close').appendTo('body');
}

body {
    background: #ccc;
    overflow-y: scroll;
    padding: 15px;
}

button {
    cursor: pointer;
}

.modal {
    width: 400px;
    margin: 5% auto 0 -200px;
    padding: 10px;
    background: #eee;
    display: none;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 10;
}

.modal-background {
    background: rgba(0, 0, 0, 0.5);
    /* background: transparent; */
    /* position: absolute; */
    position: fixed;
    z-index: 9; /* .modal[zIndex] - 1 */
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    display: none;
}

<p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<button type="button" class="modal-open">Open modal</button>

<div class="modal">
    <p>
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </p>
    <p>
        <button type="button" onclick="$('.dummy-container').toggle()">Toggle something for testing</button>
    <p>
    <p class="dummy-container" style="display: none;">
        Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </p>
    <p>
        <button type="button" class="modal-close">Close modal</button>
    </p>
</div>

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

0 讨论(0)

清酒与你

2020-12-19 02:55

Simple:

var images_modal = document.getElementById('images-model-div');

var videos_modal = document.getElementById('video-model-div');

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

if (event.target == images_modal) {

images_modal.style.display = "none";

}

if (event.target == videos_modal) {

videos_modal.style.display = "none";

}

}

0 讨论(0)
发布评论:

提交评论
- 加载中...

栀梦

2020-12-19 02:59

Use the parent node #openModal (container) instead of #popUpForm (form) :

$('body').click(function (event) 
{
   if(!$(event.target).closest('#openModal').length && !$(event.target).is('#openModal')) {
     $(".modalDialog").hide();
   }     
});

0 讨论(0)

1 2 下一页

热议问题