用灰色覆盖整个html页面以指示临时禁用

Question

对于我的html页面,我希望能够对整个页面进行着色,以指示页面中所有项目的临时禁用,以及(例如)在"提问"中打开"插入图像"对话框时的方式(例如) "这里的部分(如下面的快照所示).

我唯一能想到的是将页面的bgcolor属性设置为灰色,但这并不是我想要的,因为着色应该出现在页面项目的顶部,而不是它们后面.这样做的正确方法是什么？

Answer 1

将一个disabled类应用于您的身体并定义此样式

body.disabled:before {
   content: "";
   position: fixed;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   z-index: ... /* choose a z-index so that no other element can overlap it */
   background: rgba(0,0,0, .8);  
}

Codepen示例:http://codepen.io/anon/pen/rayvVM

如果使用伪元素,则不需要仅使用空标记来进行样式设置.
用户交互完成后,只需删除disabled该类(通过js)