Pure js implementation mask layer effect principle analysis
- 2020-03-30 03:07:05
- OfStack
It can be said that this function, after I understand the front of the "snake", it is much less difficult to imagine at the beginning, of course, this way is to cut corners, after all, is the realization of the function, we will analyze
1. Implementation principle
This article is implemented as follows:
* the pop-up layer, the mask layer, and the original page display are actually three different divs
* 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 transparent effect
* the mask layer has no practical meaning, so it does not need to be written in the HTML section, of course, it can also be written
2. Code implementation
The HTML language is as follows:
Javascript implementation of pop-up layer and mask layer:
Here with z - index to distinguish between levels, opacity and filter: alpha transparency (opacity =), the document. The createElement method (" div ") and the document body. The appendChild () these are seen in before, the application of the, so that we can realize, in fact, when principle understood at that moment, everything would be much easier.
It's a long way to go
1. Implementation principle
This article is implemented as follows:
* the pop-up layer, the mask layer, and the original page display are actually three different divs
* 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 transparent effect
* the mask layer has no practical meaning, so it does not need to be written in the HTML section, of course, it can also be written
2. Code implementation
The HTML language is as follows:
<html>
....
<body>
<center>
<div ><input type="button" value="go" onclick="show()"></div>
<div id="alert" style="display:none;">
<form>
The login
<input type="text"><input type="password"><input type="submit" value="login">
</form>
</div>
</center>
</body>
</html>
Javascript implementation of pop-up layer and mask layer:
<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 with z - index to distinguish between levels, opacity and filter: alpha transparency (opacity =), the document. The createElement method (" div ") and the document body. The appendChild () these are seen in before, the application of the, so that we can realize, in fact, when principle understood at that moment, everything would be much easier.
It's a long way to go