Create a modal pop-up layer

You can refer to the MOOC course "share: A Journey to the West" to customize different skins by adding or reducing class classes to elements. First, the modal mode refers to the gray background part, for example: (the gray part cannot be clicked)

Then, remember that the mode should be added to the current page, and the following is the so-called above of the current operation box (usually a pop-up layer: if the modal (usually a div) is positioned as fixed, it will not occupy the space of the document. Therefore, set its height and width to 100%. In addition, set left: 0; top: 0. That is, the screen is full. Then, in HTML, elements before this Div are not accessible. So how can the pop-up layer be focused? The answer is to put the pop-up layer behind the modal, and then set position: fixed (fixed positioning), adjust its top, left, and so on, so that its position and modal are "overlapped", because it is behind the modal mode, when the positions overlap, the browser will put it above, but its Z-index value has not changed. (You do not need to set the Z-index value to specifically place the modal below the pop-up layer, because this will put the elements of the original page above the modal and thus be operated, in this way, the expected results of the mode cannot be reached ).
Failed code:             function mask(){                var masknode = document.createElement("div");                masknode.className="mask";
                masknode.id="window_mask";
                document.body.appendChild(masknode);
            }

The key here is that the appendchild operation will insert the node to the end of the body, so that all the elements before it will be overwritten, so that even the pop-up layer will not have the focus and cannot be controlled.
Successful code: Function mask (){VaR masknode = Document. createelement ("Div ");Masknode. classname = "Mask ";
Masknode. ID = "window_mask ";
/* Insert a mask before the box */
Document. Body. insertbefore (masknode, document. getelementbyid ("box "));
// Document. Body. appendchild (masknode );
}

The box is the pop-up layer, where the mask is inserted before the box. Because the box is behind the modal mode, it can be clicked on the modal mode. In addition, the masknode. appendto (body) of jquery inserts the masknode into the adjacent body.












From Weizhi note (wiz)

Attachment List

• ZC} 3 ()] [) vdks [3bp0ls $ ~ J.jpg