CSS抑制屏幕，如Javascript警报 [英] CSS suppress screen like Javascript alert
问题描述
所以我有一个隐藏的div，它显示在$(document).ready()上，并显示用于登录或注册的表单.我正在尝试使屏幕显示的外观不显示传统的Javascript警报.我处于测试阶段，仅使用一个为身体设置不透明度的类，但它也适用于弹出div.我试图将不透明度设置为它背后的所有内容.这就是我所拥有的.
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");
我尝试了其他几种变体来排除该div，但是由于我正在申请body，因此我不确定是否有可能.您有什么建议可以引导我朝正确的方向前进吗?
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?
推荐答案
您应将#overlay div设置为以下内容:
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)
}
半透明的白色背景叠加层与降低身体的不透明度具有相同的效果.另外，您也可以使用1px x 1px的半透明.png背景图像代替rgba.
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.
然后，您可以在#overlay中使用另一个div，该div将使表格居中:
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
}
那样，您不必担心更改任何其他元素的css.
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:
据我了解，您当前的代码是在说查找没有id'overlay'的任何body元素并添加'suppress'类" ...换句话说，not()仅适用于匹配的元素.如果您要更改所有元素 except #overlay的不透明度，则可以执行以下操作:
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');
});
这篇关于CSS抑制屏幕，如Javascript警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
