为什么当用户在外部单击时该div不隐藏？

Question

我有一个button ，它打开/显示一个被单击的模式div 。 然后，当用户单击div外部窗口中的任何位置时，我希望此div隐藏 。 因此，基于此SO答案中的代码，我编写了以下SSCCE。

但是它不起作用 。 显示模态后，在其外部单击不会将其隐藏。 当我在模态之外单击时什么也没有发生。

我要去哪里错了？ 我如何解决它？

注意：我看到了其他与相同需求有关的问题 。 我找到了我所链接的最佳答案，并且尝试了一下。 问题是为什么此代码不起作用？

 $("button#open-modal-button").click(function() { $(".modal").show(); }); $(document).mouseup(function(event) { var modalContainer = $(".modal"); if ( ( !(modalContainer.is(event.target)) // if the target of the click is Not the modalContainer... && (modalContainer.has(event.target).length === 0) ) ) {// nor a descendant of the modalContainer modalContainer.hide(); } }); 

 .modal { width:100%; height:100%; background-color:rgba(0,0,0,0.4); position:fixed; z-index:1; display:none; left:0; top:0; } .modal-content { margin:5% auto; background-color:#fefefe; padding:20px; border:1px solid #888; width:40%; height:70vh; overflow:auto; } body { box-shading:border-box; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="open-modal-button">Open Modal</button> <div class="modal"> <div class="modal-content"> <div class="modal-header">The header</div> <div class="modal-content"> Some Content </div> </div> </div> 

Answer 1

这是因为您在整个网站上都有覆盖。 此阴影叠加层具有modal类。

因此，您检查用户是否未在modal上单击，但是您的阴影是modal 。 更改此设置，一切正常。

看这个例子，我改变了选择器。

 $("button#open-modal-button").click(function() { $(".modal").show(); }); $(document).mouseup(function(event) { var modalContainer = $(".modal"); var modal = $(".modal-content"); // This is what I've added. if ((!(modal.is(event.target)) && (modal.has(event.target).length === 0)) && $(modalContainer).is(":visible")) { modalContainer.hide(); } }); 

 .modal { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); position: fixed; z-index: 1; display: none; left: 0; top: 0; } .modal-content { margin: 5% auto; background-color: #fefefe; padding: 20px; border: 1px solid #888; width: 40%; height: 70vh; overflow: auto; } body { box-shading: border-box; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="open-modal-button">Open Modal</button> <div class="modal"> <div class="modal-content"> <div class="modal-header">The header</div> <div class="modal-content"> Some Content </div> </div> </div> 

---

编辑：

我编辑了答案，并将&& $(modalContainer).is(":visible")到了if中。 现在，只有在modal visible它才会遇到此问题。

Answer 2

你几乎在那里

通过这一行，您可以在每只鼠标上进行一些操作：

    $(document).mouseup(function(event) {

因此，总是用户单击您网站上的某个位置，他就会进入该功能。 即使模式窗口未打开！ 这不是您想要的。 如果只单击.modal但不单击其中一个子窗口，则只想关闭模式窗口。

尝试这样：

 $("button#open-modal-button").click(function() { $(".modal").show(); }); $(document).on('click', '.modal', function(event) { if('modal' !== event.target.className) { return; } $(this).hide(); }); 

 .modal { width:100%; height:100%; background-color:rgba(0,0,0,0.4); position:fixed; z-index:1; display:none; left:0; top:0; } .modal-content { margin:5% auto; background-color:#fefefe; padding:20px; border:1px solid #888; width:40%; height:70vh; overflow:auto; } body { box-shading:border-box; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="open-modal-button">Open Modal</button> <div class="modal"> <div class="modal-content"> <div class="modal-header">The header</div> <div class="modal-content"> Some Content </div> </div> </div> 

Answer 3

嗨，您可以尝试以下代码...

var _isModalOpen=false;

$("button#open-modal-button").click(function() {
        $(window).off("click",onWindowClick).on("click",onWindowClick);
        $(".modal").show();
        _isModalOpen = true;
    });

function onWindowClick(e)
{
  var modalContainer = $(".modal")[0];
  if(_isModalOpen && e.target != modalContainer)
  {
       $(modalContainer).hide();
       $(window).off("click",onWindowClick);
      _isModalOpen = false;
  }
}

Answer 4

您可以为modal-content简单地设置一个事件，以阻止event bubbling而为document隐藏模态的另一个event bubbling ，如下所示。

$('.modal-content').mouseup(function(event) {
      event.stopPropagation();
    });


    $(document).mouseup(function(event) {
        $(".modal").hide();
    });

工作片段 ：

 $("button#open-modal-button").click(function() { $(".modal").show(); }); $('.modal-content').mouseup(function(event) { event.stopPropagation(); }); $(document).mouseup(function(event) { $(".modal").hide(); }); 

 .modal { width:100%; height:100%; background-color:rgba(0,0,0,0.4); position:fixed; z-index:1; display:none; left:0; top:0; } .modal-content { margin:5% auto; background-color:#fefefe; padding:20px; border:1px solid #888; width:40%; height:70vh; overflow:auto; } body { box-shading:border-box; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="open-modal-button">Open Modal</button> <div class="modal"> <div class="modal-content"> <div class="modal-header">The header</div> <div class="modal-content"> Some Content </div> </div> </div> 

Answer 5

您可以使用此功能：

$("button#open-modal-button").click(function() {
    $("#myModal").modal({backdrop: true});
});