JS+CSS popup full screen grey and black transparent mask effect method

  • 2020-05-07 19:14:35
  • OfStack

This article illustrates an example of how js+CSS can pop up a full-screen grey-black transparent mask. Share with you for your reference. Specific analysis is as follows:

In many sites have such an effect, when the operation of 1, will pop up a gray black translucent mask, above can be operated on the specified content, such as can pop up a landing box, etc., the following is how to achieve this effect, the code example is as follows:

<!DOCTYPE html>    
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="//www.ofstack.com/" /> 
<title>CSS How to implement ejection 1 A full screen grey and black transparent mask effect - The home of the script </title>
<style type="text/css">
*
{
 margin:0px;
 padding:0px;
}
.zhezhao
{
 width:100%;
 height:100%;
 background-color:#000;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity:0.5;
 position:absolute;
 left:0px;
 top:0px;
 display:none;
 z-index:1000;
}
.login
{
 width:280px;
 height:180px;
 position:absolute;
 top:200px;
 left:50%;
 background-color:#000;
 margin-left:-140px;
 display:none;
 z-index:1500;
}
.content
{
 margin-top:50px;
 color:red;
 line-height:200px;
 height:200px;
 text-align:center;
}
</style>
<script type="text/javascript">
window.onload=function()
{
 var zhezhao=document.getElementById("zhezhao");
 var login=document.getElementById("login");
 var bt=document.getElementById("bt");
 var btclose=document.getElementById("btclose");
 
 bt.onclick=function()
 {
  zhezhao.style.display="block";
  login.style.display="block";
 }
 btclose.onclick=function()
 {
  zhezhao.style.display="none";
  login.style.display="none"; 
 }
}
</script>
</head>
<body>
  <div class="zhezhao" id="zhezhao"></div>
  <div class="login" id="login"><button id="btclose"> Click on close </button></div> 
  <div class="content"> Script house welcomes you, <button id="bt"> Click the pop-up mask </button></div>
</body>
</html>

The basic mask function is realized above. When you click the mask, an object will pop up. When you click close, the mask effect disappears. The following is how to achieve the secondary effect:

implementation principle:

div to create a full screen, using absolute positioning, so it can be separated from the document flow, won't impact on other elements, and set it to translucent, of course, this transparency can literally, create a login elements at the same time, it also use absolute positioning, and its z - index div attribute value is greater than the surface screen, this time it will not be full screen div covering. By default, the display attribute value for both div is none. When the appropriate button is clicked, their display attribute value can be changed.

recommends that write code by hand as much as possible, which can effectively improve the learning efficiency and depth.

I hope that this article has been helpful to your web programming.


Related articles: