JavaScript Quick Start-combat (example)

1. Simulate the modal frame in bootstrap

: (Click after me, pop-up dialog, the bottom of the content can be seen, but there is a certain degree of transparency.) ）

Thinking Analysis:

The whole is divided into three layers, the lowest level (point me), the middle transparent layer (achieve transparency effect), the topmost (the latest content show)

Obviously, three div can be achieved, the normal situation above the 2-layer div hidden, by clicking "Point Me", the above 2-layer Div emerges, so that the animation effect.

The code is as follows:

<! DOCTYPE html>
　　
Knowledge Point Analysis:
1. The body setting margin is 0. Keep the HTML page pinned.
2, cover layer and the outermost position is fixed;
3. Cover layer is covered with screen, top, right, bottom and left are set to 0;
4, the outermost position of the center, this point to say:
In general, we set the outermost div's distance top to 50%,left to 50%.
However, this is somewhat different from what we expected because the div itself has a height and width, so it doesn't look centered, so we need to move the div up and to the left 50% (height and width).
            top:50%;            left:50%;            Margin-left: -100px;            Margin-top: -100px;            height:200px;            width:200px;                
　　
JavaScript Quick Start-combat (example)