Analysis of the principle of mask layer effect using pure js_javascript skills

It can be said that this function, after I understood the previous "Snake", is really much different from the difficulty I first imagined. Of course, this method is a bit tricky, but it has achieved the function after all. Let's analyze it. Organizing

1. Implementation principle

The implementation principle of this article is as follows:

* In fact, the pop-up layer, mask layer and original page The display is divided into 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 transparency effect

* The mask layer has no practical meaning, so there is no need to write it in the html part. Of course, it can also be achieved by writing

2. Code implementation

The html language is as follows:

Copy code The code is as follows:

....

Login

Javascript implements pop-up layer and mask layer:

Copy code The code is as follows:

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";
}

Z-index is used here to distinguish levels , opacity and filter: alpha (opacity=) transparency, document.createElement("div") and document.body.appendChild() have all appeared and been applied before, so we can achieve it. In fact, when The moment you understand the principle, everything will become much easier.

The road is long and long.