CSS+JavaScript
Implementation principle:
Create a full-screen div, using absolute positioning, so that it can be separated from the document stream, without affecting other elements, and set it to a translucent state. Of course, this transparency can be adjusted at will, and create a login element, which also uses absolute positioning and makes its z-index attribute value greater than the div on the screen, and at this time it will not be covered by the full-screen div. In the default state, the display attribute value of these two divs is none. When clicking the corresponding button, they can change their display attribute value.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https:///" />
<title>CSSHow to pop up a full-screen gray-black transparent mask effect-I</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">
=function()
{
var zhezhao=("zhezhao");
var login=("login");
var bt=("bt");
var btclose=("btclose");
=function()
{
="block";
="block";
}
=function()
{
="none";
="none";
}
}
</script>
</head>
<body>
<div class="zhezhao" ></div>
<div class="login" ><button >Click to close</button></div>
<div class="content">I欢迎您，<button >Click to pop up mask</button></div>
</body>
</html>
The above implements the basic mask function. When clicking to pop up the mask, an object will pop up. When clicking to close, the mask effect will disappear.
Pure JavaScript:
Implementation effect: When a window pops up, the page behind the window becomes dark and cannot be operated.
Difficulty: Because the div layer cannot cover the select control, there are two special methods: one is to add an iframe below the pop-up window to cover the select; the second is to hide the select control when pop-up, and choose the second method here.
Implementation principle: add a translucent layer on the page and the middle of the pop-up window to overwrite the content of the page.
Code:
<script language="javascript">
function Open()
{
//Hide the select control DispalySelect(0);
//Display mask layer ("divPageMask").="block";
//Treat the mask layer resizeMask();
= resizeMask;
//Show pop-up window ("divOpenWin").="block";
}
function Close()
{
//Show select control DispalySelect(1);
//Treat the mask layer = "0px";
= "0px";
= "none";
= null;
("divOpenWin").="none";
}
//Page Maskfunction resizeMask()
{
= ;
= ;
= (( - ) / 2);
= (( - ) / 2);
}
function DispalySelect(val)
{ //Show and hide the select control var dispalyType;
var arrdispalyType=["hidden","visible"];
var arrObjSelect=("select");
for (i=0;i<;i++)
{
arrObjSelect[i].=arrdispalyType[val];
}
}
</script>
<style type="text/css">
.body,td{font-size:12px}
#divPageMask{background-color:white; filter:alpha(opacity=50);left:0px;position:absolute;top:0px;}
#divOpenWin{background-color:#EEEEEE;position: absolute;left:0px;top:0px;display: none;z-index:50; width:300px;height:150px}
</style>
<div ></div>
<div ><center><a href="javascript:Close();">closure</a></center></div>
<label></label>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="650">
<tbody>
<tr>
<td colspan="2" align="center" height="90"><p><img src="/Images/Index/" height="60" width="250"></p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
</tr>
<tr>
<td height="10" style="color:#666666;font-size:13px">&nbsp;</td>
</tr>
</tbody>
</table>
<table bgcolor="#e1e1e1" border="0" cellpadding="0" cellspacing="1" height="85" width="650">
<tbody>
<tr>
<td align="center" bgcolor="#f9f9f9"><table height=50 cellspacing=0 cellpadding=0 width=600 style="margin-top:20px">
<FORM name="f" action="/">
<tbody>
<tr>
<td class="searchbar_word">Keywords：</td>
<td width="241"><input type="text" name="k" size=30 /></td>
<td align=middle width=101 class="searchbar_word">location：</td>
<td align=middle width=97 ><script language="javascript" src="/Inc/Js/?CityName=Beijing"></script></td>
<td align=middle width=95><input name="s" type=submit value="Search Shop"></td>
</tr>
</form>
<tr>
<td width="64" height="30">&nbsp;</td>
<td colspan="4" valign="middle" class="search_text">For example：Dining room；Electrical appliances；supermarket
</table></td>
</tr>
</tbody>
</table>
</center>
<p align="center">&nbsp;</p>
<p align="center"><a href="javascript:Open();">Open the mask</a></p>
<p align="center">&nbsp;</p>
<table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<!-- <tr>
<td align="center" background="Images/Index/line_2.gif" width="580"><img src="Images/Index/line_2.gif" height="9" width="9"></td>
</tr>-->
<tr>
<td class="link" align="center" height="30"><a href="#" target=_blank><font color="#FF6600">Submit store for free</font></a> | <a class="toplink" href="#">Shop promotion</a> | <a class="toplink" href="#">About Sousu</a> | <a class="toplink" onClick="='url(#default#homepage)';('');return false;" href="/#">Set as homepage</a> | <a class="toplink" onClick="javascript:('/','Soupu.com-China's largest store search engine')" href="/#">Add to favorites</a> </td> </tr>
<tr>
<td align="center" height="30">&copy;2007 Soupu.com &nbsp;&nbsp;&nbsp;&nbsp;GuangdongICPPrepare07006767Number</td>
</tr>
</tbody>
</table>