如何禁用除特定div之外的整個頁面？

Question

我有一個彈出的<div>元素，當它出現時，其后面的內容將更改為opacity: 0.2以使<div>使用此行代碼脫穎而出：

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

我如何“禁用” <div>后面的內容以防止使用jQuery單擊它？

我有以下幾行代碼可以防止按鈕被單擊並防止指針光標出現，但是它不能完全禁用內容，因為仍然可以突出顯示文本，並且可能還有更多內容：

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

是否有一行代碼實際上禁用了頁面（除div之外），而不是每件事都使用不同的代碼行（例如，阻止文本突出顯示並禁用按鈕）？

Answer 1

基本上有兩個選項可供選擇：使用css user-select: none具有當前的缺點（瀏覽器支持） https://developer.mozilla.org/zh-CN/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;
}