9

我用以下方法制作了覆盖 div：

position: absolute; top: 0; left: 0; widht: 100%; height: 100%;

基本上我希望这个覆盖 div 覆盖我的整个页面。它可以满足我的需要，但我还需要底层 div 不可点击。它们确实不可点击，但仅在 FF、Safari 和 Chrome 中。在 IE 和 Opera 中，您仍然可以单击下方的按钮。

有谁知道如何实现这种“不可点击的潜在行为”？

4

6 回答 6

20 
.class {pointer-events: none;}
于 2014-01-09T11:49:55.673 回答
1

为覆盖 div 添加一个 onclick 处理程序。

于 2009-12-12T21:23:28.543 回答
1

您还需要使用 z-index 来确保您的新 div 位于其他所有内容之上。如果没有此属性，您将受到浏览器的支配，即哪个浏览器位于顶部并接收 onclick

还要注意一个已知的 IE（旧版本）错误，即输入类型选择会忽略 z-index

于 2009-12-12T21:33:41.350 回答
1

如果您使用的是 jQuery 之类的东西，您可以执行类似的操作

$("a:not(.overlay)").click(function(e) { e.preventDefault(); });
$("input:not(.overlay)").click(function(e) { e.attr("disabled", "disabled"); });

您将覆盖层中的所有内容（链接、按钮等）提供覆盖层类，这将有效地禁用页面上的所有其他内容。

于 2009-12-12T21:37:52.293 回答
1

这可以使用 javascript 轻松完成：

  • 创建一个 div 用高 z-index 屏蔽整个页面
  • 让面具捕捉所有点击
  • 移除遮罩后，页面再次变为可点击。

这种方法当然可以用于所有 dom 元素，而不仅仅是 body。

var mask = $('<div></div>')
  .css({
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: 0,
    left: 0,
    'z-index': 10000
  })
  .appendTo(document.body)
  .click(function(event){
    event.preventDefault();
    return false;
   })

此处的工作示例：http: //jsfiddle.net/GTPW3/3/

于 2013-01-07T12:07:44.987 回答
0

覆盖CSS：

z-index: 10000;

会照顾它。

于 2012-09-20T05:43:35.560 回答