4

做一个模态的经典方法是一个带有内容（对话框）的 div 和一个 z-index 较低的 div（覆盖）然后，我可以在覆盖上绑定点击事件并隐藏内容对话框。

<div class="dialog">...</div>
<div class="overlay" style="background-color:rgba(255, 255, 255, 0.9)">

但我注意到 Pinterest 和 Facebook 将其合并为一个 div。

<div class="overlay" style="background-color:rgba(255, 255, 255, 0.9);position: fixed; z-index: 9999;top: 0;right: 0;bottom: 0;left: 0;">
      <div class="dialog" style="position: static;"></div>
</div>

但是在这种方法中，我如何才能将点击事件绑定到仅在没有对话框的叠加层中关闭 de 对话框？

http://jsfiddle.net/mCupS/9/

4

2 回答 2

11

通过做这样的事情：

$('.modal').click(function(){
     $('.modal, .inner').hide(); 
});                                    
$('.inner').click(function(e){
   e.stopPropagation();
});              
​

http://jsfiddle.net/mCupS/10/

event.stopPropagation(): 防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

于 2012-04-28T06:15:48.683 回答
2

stopPropagation将停止事件传播到父控件，您将不会获得模型点击事件：

$('.modal ').click(function(){
    alert("a");
});

$('.inner').click(function(e){
    alert("b");
    e.stopPropagation();
});

编辑，实现上述目的的更好方法。

正如评论中指出的那样，可能有更好的方法，然后上面建议的解决方案如The Dangers of Stopping Event Propagation中讨论的那样。通过这种方式，您可以确保内部项目不会被单击隐藏。

现场演示

$(document).on('click', function(event) {
  if (!$(event.target).closest('.inner').length) {
    $('.modal .inner').hide();
  }
});
于 2012-04-28T06:17:20.490 回答