如何在元素可见时禁用外部点击？

Question

我有一个div,divDialog,它包含一个简单的对话框.它开始是隐形的,但在某一点上我让它变得可见.该页面上有几个其他元素(菜单等),它们具有click事件的事件监听器.

我的问题是,一旦divDialog可见,我如何禁用除divDialog之外的所有点击事件？当然,一旦divDialog再次隐形,我想恢复所有听众的正常行为.

我读了这个优雅的答案,但它不会禁用外部点击,也不会跨平台.

我有一个例程,可以检测节点是否是另一个节点的祖先:

function isAncestorOf(ancestor, descendant) {...}

......这在解决方案中可能是必要的.但我遇到了事件监听器,冒泡,捕获和跨平台行为的麻烦(似乎无法弄清楚IE).

我没有在这个上使用jquery; 只是常规ol'javascript.

有什么建议？

Answer 1

你应该把一个透明的,固定div在窗户上.这样,屏幕上的任何点击都将是div而不是它下面的元素.这通常用作模态对话框的背景叠加.在IE中,你需要确保为位置声明了一个!DOCTYPE:固定工作.

div#overlay {
   position:fixed;
   top:0;
   left:0;
   height:100%;
   width:100%;
   z-index:100;
   background-color:#444444;
   opacity:0.5;
   filter:alpha(opacity=50);
}

并且您需要确保divDialog的z-index大于覆盖的z-index.