做模态的经典方法是一个带有内容(对话框)的 div 和一个 z-index 较低的 div(覆盖) 然后,我可以在叠加层上绑定(bind)点击事件并 Conceal 内容对话框。
<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>
但是在这种方法中,我如何绑定(bind)点击事件以仅在没有对话框的覆盖层中关闭对话框?
最佳答案
通过做这样的事情:
$('.modal').click(function(){
$('.modal, .inner').hide();
});
$('.inner').click(function(e){
e.stopPropagation();
});
event.stopPropagation()
: 防止事件在 DOM 树中冒泡,从而防止任何父处理程序收到事件通知。
关于jquery - 如何关闭点击外部的 div(模态)。 Pinterest 和 Facebook 方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10361118/