Want everyone to do the mask layer of this common function, CSS or jquery implementation, the implementation of diversification, here http://I introduce the way I implemented in the project, Full-screen Mask, part of the area can be operated, very practical.
The effect of the following figure:
JS Implementation section:
Copy Code code as follows:
<script type= "Text/javascript" >
var Myalert = document.getElementById ("alert");
var reg = document.getElementById ("content"). getElementsByTagName ("a") [0];
Reg.onclick = function () {
MyAlert.style.background = "#e2ecf5";
MyAlert.style.zIndex = "501";
MyAlert.style.position = "absolute";
var Signspan = document.getElementById ("Signspanid");
MyAlert.style.top = Signspan.offsettop;
MyAlert.style.left = Signspan.offsetleft;
MYBG = document.createelement ("div");
Mybg.setattribute ("id", "MYBG");
Mybg.style.background = "#000";
Mybg.style.width = "100%";
Mybg.style.height = "100%";
Mybg.style.position = "absolute";
Mybg.style.top = "0";
Mybg.style.left = "0";
Mybg.style.zIndex = "500";
mybg.style.opacity = "0.3";
Mybg.style.filter = "Alpha (opacity=30)";
Document.body.appendChild (MYBG);
Document.body.style.overflow = "hidden";
}
</script>
Page code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<body>
<table border= "1" align= "center" width= "700px" >
<tr>
<TD width= "300px" height= "200px" style= "FONT-SIZE:28PX; Font-weight:bold ">
<div id= "Content" >
<a href= "#" >
Start Mask Layer
</a>
</div>
</td>
<TD style= "Vertical-align:top" >
<div id= "Signspanid" style= "Position:absolute;" ></div>
<div id= "alert" align= "Top" >
<span>
This is the highlighted area
</span>
<p>
<label>
User name
</label>
<input type= "Text"/>
</p>
<p>
<label>
Password
</label>
<input type= "Password"/>
</p>
<p>
<input type= "Submit" value= "registered"/>
<input type= "reset" value= "reset"/>
</p>
</div>
</td>
<TD width= "100px" >
<div> I am the third column </div>
</td>
</tr>
</table>
</body>
