It can be said that after I understood the previous "snake", this function is really much less difficult than I imagined at the beginning. Of course, this method is suspected of being tricky, and it is ultimately the function has been implemented. Let's analyze and organize it.
1. Implementation principle
The implementation principle of this article is as follows:
* In fact, the pop-up layer, mask layer and original page display are three different divs respectively
* The level of the pop-up layer is above the mask layer, and the level of the mask layer is above the original page display;
* The mask layer has a clear effect
* The mask layer has no practical meaning, so it doesn't need to be written on the html part. Of course, it can also be realized after writing.
2. Code implementation
The html language is as follows:
The code copy is as follows:
<html>
....
<body>
<center>
<div ><input type="button" value="go" onclick="show()"></div>
<div id="alert" style="display:none;">
<form>
Log in
<input type="text"><input type="password"><input type="submit" value="login">
</form>
</div>
</center>
</body>
</html>
JavaScript implements pop-up layer and mask layer:
The code copy is as follows:
<span style="font-size:12px;">function show(){
var alertPart=document.getElementById("alert");
alertPart.style.display="block";
alertPart.style.position = "absolute";
alertPart.style.top = "50%";
alertPart.style.left = "50%";
alertPart.style.marginTop = "-75px";
alertPart.style.marginLeft = "-150px";
alertPart.style.background="cyan";
alertPart.style.width="300px";
alertPart.style.height="200px";
alertPart.style.zIndex = "501";
var 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></span>
Here we use z-index to distinguish hierarchies, opacity and filter: alpha(opacity=) transparency, document.createElement("div") and document.body.appendChild(), these are all used before, so that we can achieve them. In fact, when the principle is understood, everything will be much easier.
The road is long and arduous