Home Web Front-end HTML Tutorial Implementation of CSS mask layer_html/css_WEB-ITnose

Implementation of CSS mask layer_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:52 AM

---

偶然发现自己原来写了一个CSS遮罩层，虽然这个东西没什么技术含量，但如果本人离开公司后又遇见此类问题，那么可能又得花些时间来找资料了。所以决定还是把它记下来吧。 
直接上代码吧。 
第一步，html代码： 

Java代码  

1.   
2.    
     
3.       
4.          
5.        
6.     

  

    

  

  

                                  

  

  

《挂号须知》  

The above code consists of three parts. popDiv represents the pop-up layer, which pops up when the "Registration Instructions" link is clicked.
And bg represents the mask layer, that is, when the pop-up layer is displayed, the content behind the layer is covered. The last one refers to the displayed link.
The CSS classes of these three parts are as follows:

Css code

1. .mydiv {
2. #FCF4EA; Or>
Border: 1px solid#d00000;
Text-Align: Center;
FONT-SIZE: 12px;
Z-Index: 99;
left:30%;/*FF IE7*/
top: 20%;/*FF IE7*/
margin-left:-150px!important;/*FF IE7 This value is half of its width */  
margin-top:-60px!important;/*FF IE7 This value is half of its height*/  
 margin-top:0px;
position:absolute;/*FF IE7*/
}
.note_div{
width: 700px; 400px;
overflow:scroll;
text-align: left;
padding:15px;
#ccc;
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;
position:absolute;/*IE6*/
}
26. There is a very important part, that The problem is that the bg mask layer needs to cover the full screen. This thing is difficult to solve, so we use JQuery to solve it, that is, set the size of the bg when the page is initialized:

$(".bg").width($(document).width());

$('.bg').css('left',0); '.bg').css('top',0);
});
4. After having the above foundation, only You need to set the data and mask layer to be displayed through ajax callback when clicking the link, as follows:
Js code

function showDiv (orgId){                                                                                    bg").show();

});

$("#popDiv").fadeOut(1000,function(){
$("#bg").hide();
});
} 
6. This process is actually relatively simple, but I don’t often do page stuff, so I can’t remember much about CSS. I just knew a little bit and wrote it down.