CSS suppress screen like Javascript alert

2019-07-27 08:29发布

站内问答 / HTML/CSS
1825 1 4

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?

标签： css addclass
举报
1条回答
Anthone
2楼-- · 2019-07-27 08:50

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人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)