jquery - 如何关闭点击外部的 div(模态)。 Pinterest 和 Facebook 方式

Question

做模态的经典方法是一个带有内容(对话框)的 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)点击事件以仅在没有对话框的覆盖层中关闭对话框？

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

Answer 1

通过做这样的事情:

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

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

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