CSS 抑制屏幕，如 Javascript 警报

发布于 2024-12-27 03:01:13 字数 340 浏览 0 评论 0原文

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

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

我已经尝试了几种其他变体来排除该 div，但我不确定它是否可能，因为我正在应用于 body。您有什么建议可以引导我走向正确的方向吗？

原文

So I have a hidden div that shows itself on $(document).ready() displaying a form to either log in or sign up. I'm trying to get the screen suppressed look as when a traditional Javascript alert is shown. I'm in testing phase and just using a class that sets opacity to the body but it's also applying to the pop-up div. I'm trying to just set opacity to the everything behind it. Here is what I have.

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

I've tried several other variations to exclude that div but I'm not sure it it's possible since I'm applying to the body. Do you have and suggestions to lead me in the right direction?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青瓷清茶倾城歌 2025-01-03 03:01:13

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

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

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

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

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

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

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

据我所知，您当前的代码是说“找到任何没有 id 'overlay' 的 body 元素并添加 'suppress' 类”...换句话说，不是() 只适用于匹配元素的集合。如果您想要更改除 #overlay 之外的所有元素的不透明度，您可以执行以下操作：

<body>
     <div id="overlay">
          overlay stuff in here
     </div>

     <div id="other-content">
          All page content in here
     </div>
</body>


$(document).ready(function(){
     $('#other-content').addClass('suppress');  
});

You should set the #overlay div to the following:

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

The semi-transparent white background overlay will have the same effect as lowering the opacity of the body. Alternatively you could use a 1px by 1px semi-transparent .png background image instead of rgba.

Then you can use another div inside of #overlay which will center the form:

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

That way you don't have to worry about altering the css of any other element.

To comment on the approach you mentioned in your answer:

It's my understanding that your current code is saying "find any body element that does not have the id 'overlay' and add the class 'suppress'"... in other words, not() only applies to the set of matched elements. If what you want is to change the opacity of all elements except #overlay, you could do the following:

<body>
     <div id="overlay">
          overlay stuff in here
     </div>

     <div id="other-content">
          All page content in here
     </div>
</body>


$(document).ready(function(){
     $('#other-content').addClass('suppress');  
});

回复收藏 0 原文

~没有更多了~