CSS抑制屏幕就像Javascript警报一样

所以我有一个隐藏的div，它显示在$(document).ready()上，显示一个表单以登录或注册。 我正试图让屏幕被抑制，就像显示传统的Javascript警报一样。 我正在测试阶段，只是使用一个将不透明度设置为正文的类，但它也适用于弹出式div。 我试图将不透明度设置为它背后的一切。 这就是我所拥有的。

 $("body").not("#overlay").addClass("suppress"); 

我已经尝试了几个其他的变种来排除那个div，但我不确定它是否可能，因为我正在申请body 。 你有没有建议引导我朝着正确的方向前进？

Answer 1

您应该将#overlay div设置为以下内容：

 #overlay { width: 100%; height: 100%; position:fixed; z-index: 1000; background: rgba(255, 255, 255, 0.7) } 

半透明的白色背景叠加与降低身体的不透明度具有相同的效果。 或者，您可以使用1px x 1xx半透明.png背景图像而不是rgba。

然后你可以在#overlay中使用另一个div，它将使表单居中：

 #overlay .inner { width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px } 

这样你就不必担心改变任何其他元素的css。

---

评论您在答案中提到的方法：

我的理解是你当前的代码说“找到没有id’覆盖’的任何body元素并添加类’suppress’”…换句话说，not（）仅适用于匹配元素集。 如果你想要的是改变除 #overlay 之外的所有元素的不透明度，你可以执行以下操作：

  
 overlay stuff in here 
 
 All page content in here 
  $(document).ready(function(){ $('#other-content').addClass('suppress'); });