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

我有一个弹出<div>元素，当它出现时，它后面的内容更改为opacity: 0.2，使<div>脱颖而出使用此行代码：如何禁用整个页面除了特定的div？

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

我如何“禁用”的后面的内容<div>，以防止使用jQuery进行点击？

我有几行代码，以防止被点击，并防止指针光标出现的按钮，但它并不完全禁止内容，文字仍然可以高亮显示，并有可能更多：

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

是否有一行代码能够从字面上禁用页面（除了div），而不是每个事物的不同代码行（例如，停止突出显示和禁用按钮的文本）？

来源

2017-01-29 The Codesee

我认为你正试图实现模态功能？如果是，则可以在页面的整个内容上创建叠加层，但在弹出的div下面叠加，以防止用户与弹出窗口后面的内容进行交互。 –

基本上有两个选项可供选择：使用CSS user-select: none与它的电流缺点（浏览器支持）https://developer.mozilla.org/en-US/docs/Web/CSS/user-select或通过添加模态与实际内容之间的覆盖格。有几种方法在那里，下面的链接会给你一个概述，并会指出你在正确的方向： 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; 
}

来源

2017-01-29 11:53:12

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

回答

相关问题