Implementation of the CSS mask layer and the CSS Mask Layer

Implementation of the CSS mask layer and the CSS Mask Layer

I accidentally found that I had written a CSS mask layer. Although this thing has no technical content, if I leave the company and then encounter such problems, it may take some time to find the materials. So I decided to write it down.
Run the Code directly.
Step 1: html code:

Java code

1. <Div id = "popDiv" class = "mydiv" style = "display: none;">
2. <Div style = "text-align: right">
3. <A href = "javascript: closeDiv ()">
5. </A>
6. </Div>
7. <Div id = 'orgnote' class = "note_div"> </div>
8. </Div>
10. <Div id = "bg" class = "bg" style = "display: none;"> </div>
11. <Div style = "margin-left: 180px;">
12. <A title = "instant registration and return information" style = "margin-left: 0px; # FFFF66; font-size: 16px; text-decoration: underline! Important; "href = 'javascript: showDiv ($ {doctor. orgId}) '> Registration Notice </a>
13. </Div>

The above code consists of three parts. popDiv indicates the pop-up layer, which is displayed when you click the registration notice link.
Bg indicates the mask layer, that is, the content behind the layer is hidden when the pop-up layer is displayed. The link is displayed.
The CSS classes of these three parts are as follows:

Css code

1. . Mydiv {
2. # FCF4EA;
3. Border: 1px solid # D00000;
4. Text-align: center;
5. Font-size: 12px;
6. Z-index: 99;
7. Left: 30%;/* FF IE7 */
8. Top: 20%;/* FF IE7 */
9. Margin-left:-150px! Important;/* FF IE7 this value is half of its width */
10. Margin-top:-60px! Important;/* FF IE7 this value is half of this height */
11. Margin-top: 0px;
12. Position: absolute;/* FF IE7 */
13. }
14. . Note_div {
15. Width: 700px;
16. Height: 400px;
17. Overflow: scroll;
18. Text-align: left;
19. Padding: 15px;
20. }
21. . Bg {
22. # Ccc;
23. Filter: alpha (opacity = 50);/* IE */
24. Opacity: 0.5;/* FF */
25. Z-index: 1;
26. Position: absolute;/* IE6 */
27. }

The most important part is that the bg mask layer needs to cover full screen. This is difficult to solve, so JQuery is used to solve it, that is, when the page is initialized, set the bg size:

Js Code

1. $ (Function (){
2. $ (". Bg"). width ($ (document). width ());
3. $ ('. Bg'). height ($ (document). height ());
4. Parameters ('.bg').css ('left', 0 );
5. Certificate ('.bg'0000.css ('top', 0 );
6. });

With the above foundation, you only need to set the data and mask layer to be displayed by clicking the link via ajax callback, as shown below:

Js Code

1. Function showDiv (orgId ){
2. RegAsyncController. getOrgNotes (orgId, function (data ){
3. $ ("# OrgNote" 2.16.html (data );
4. $ ("# Bg"). show ();
5. $ ("# PopDiv"). fadeIn (1000 );
6. });
7. }
8. Function closeDiv (){
9. $ ("# PopDiv"). fadeOut (1000, function (){
10. $ ("# Bg"). hide ();
11. });
12. }

This process is actually relatively simple, but I do not often engage in page things, so I can't remember a few things of CSS. I just need to know something and write it down.