Question

我有一个弹出式<div>元素，当它出现时，其背后的内容更改为opacity: 0.2，以使<div>使用以下代码突出显示：

$(".main").css("opacity", "0.2");

我怎样才能＆＃34;禁用＆＃34; <div>背后的内容，以防止它使用jQuery点击？

我有这些代码行来防止按钮被点击并阻止指针光标出现，但它并没有完全禁用内容，因为文本仍然可以突出显示，可能还有更多： / p>

$("form :input").attr("disabled","disabled");
$(".main .input").css("cursor", "auto");

是否有一行代码实际上禁用了页面（除了div），而不是每个东西的不同代码行（例如，停止突出显示文本和禁用按钮）？

Answer 1

基本上有两种选择可供选择：使用css user-select: none及其当前的劣势（浏览器支持）https://developer.mozilla.org/en-US/docs/Web/CSS/user-select或在模态和实际内容之间添加叠加div。有几种方法，以下链接将为您提供概述，并指出您正确的方向： https://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

我个人会使用伪元素技术而不是直接更新不透明度来切换主元素上的一个类：

/* JS */
$(".main").addClass("has-overlay");

/* CSS */
.main.has-overlay {
  opacity: 0.2;
}

.main:after {
  content: "";
  display: none;
  position: fixed; /* could also be absolute */ 
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  background transparent;
}

.main.has-overlay:after {
  display: block;
}

如何禁用除特定div之外的整个页面？

1 个答案: