如何关闭div(模态)点击外面.Pinterest和Facebook的方式

Question

做模态的经典方法是使用内容(对话框)和带有z-index lower(叠加)的div然后,我可以在叠加层上绑定click事件并隐藏de content对话框.

<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>

但是在这种方法中,如何仅在没有对话框的叠加层中将click事件绑定到close de dialog？

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树,防止任何父处理程序被通知事件.