Basic understanding 4: pop-up layer and drag, understand the pop-up layer drag

Basic understanding 4: pop-up layer and drag, understand the pop-up layer drag

The pop-up layer is often used in Web development. It used to be Baidu copy and paste, and has never been carefully read or understood.

Until one day there was no network, and then I suddenly thought of it. Why is it so simple to copy and paste for so long? The summary is as follows:

1. Set a transparency opacity: 0.5 for a large div background; filter: alpha (opacity = 57) for absolute or fixed positioning, with the highest width, z-index is larger than the covered page content.

2. Make an absolute position for the content div, and set the box-shadow attribute with a higher z-index.

3. Set a layer to wrap them up to facilitate removal and addition. click the button to get them and append them to the body. remove them if you don't need. As follows:

<Div id = "modal">

<Div class = "layer">

</Div>

<Div class = "content">

</Div>

<Div>

4. Since it is a pop-up layer, you have to drag it. In fact, I have never dragged any websites I use. The first time you see this, you will think of recording the coordinates when you press the button, and then calculating and setting the position of the pop-up window when you drag it. One thing to note is the Firefox event problem var et = window. event | arguments. callee. caller. arguments [0];

The effect is as follows: