防止与HTML内容交互

Question

我有一个站点菜单，它位于覆盖层下方，通过点击覆盖层上的按钮显示，该按钮将其滑动到一边。

我想做的是，当站点菜单打开时，防止覆盖(理想情况下，除了菜单按钮之外的所有内容)与之交互。

我可以通过隐藏和显示一个位于所有覆盖内容之上的容器来做到这一点，但我想知道是否有一种方法可以用CSS(最佳选项)或javascript设置某种属性来禁用覆盖上的点击/触摸事件。什么好主意吗?

Answer 1

你可以使用JQuery模态叠加来禁止用户使用模态div中的任何其他内容。

http://jqueryui.com/demos/dialog/模态

Answer 2

当菜单打开时，将此属性添加到您想要禁用的任何控件

onclick="return false;"

然后在菜单关闭时删除该属性。这将阻止默认操作的发生。

您可以使用以下代码来实现此功能，而无需添加属性:

document.getElementById("myElement").onclick = function() { return false; } 

Answer 3

CSS是关于外观的，而不是行为。所以你不能通过应用CSS来启用或禁用元素。

你的解决方案与覆盖是相当有能力的，我也会这样做。注意，你的覆盖可以是透明的或半透明的。

可以通过用Javascript重写click事件来解决，但是为什么要创建一个复杂的解决方案(你必须重新定义每个元素上的onclick事件，然后以某种方式将其设置回正常)，如果你已经有了一个简短的干净的解决方案?

作为mbsurfer已经建议，一个快速的方法禁用一切除了你的菜单是使用jQuery UI的.dialog与modal选项:

$(function() {
  $( "#menu" ).dialog({
    modal: true
  });
});

文档中的更多信息:http://api.jqueryui.com/dialog/