CSS遮罩层的实现_html/css_WEB-ITnose
程序员文章站
2022-04-19 15:41:44
...
偶然发现自己原来写了一个CSS遮罩层，虽然这个东西没什么技术含量，但如果本人离开公司后又遇见此类问题，那么可能又得花些时间来找资料了。所以决定还是把它记下来吧。
直接上代码吧。
第一步，html代码：
直接上代码吧。
第一步，html代码：
Java代码
上面的代码由三部分构成，popDiv表示弹出层，即单击“挂号须知”链接时弹出。
而bg表示遮罩层，即弹出层显示时将层后面的内容遮住。最后就是指显示的链接。
这三部分的CSS类如下：
Css代码
- .mydiv {
- #FCF4EA;
- 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 该值为本身宽的一半 */
- margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
- margin-top:0px;
- position:absolute;/*FF IE7*/
- }
- .note_div{
- width:700px;
- height:400px;
- overflow:scroll;
- text-align: left;
- padding:15px;
- }
- .bg {
- #ccc;
- filter:alpha(opacity=50);/*IE*/
- opacity:0.5;/*FF*/
- z-index:1;
- position:absolute;/*IE6*/
- }
有个部分很重要，那就是bg遮罩层的要覆盖全屏的问题，这个东西比较难解决，所以借助了JQuery来解决，即页面初始化时再设置bg的大小：
Js代码
- $(function(){
- $(".bg").width($(document).width());
- $('.bg').height($(document).height());
- $('.bg').css('left',0);
- $('.bg').css('top',0);
- });
有了上面的基础之后，只需要在单击链接时通过ajax回调来设置需要显示的数据及遮罩层，如下：
Js代码
- function showDiv(orgId){
- regAsyncController.getOrgNotes(orgId,function(data){
- $("#orgNote").html(data);
- $("#bg").show();
- $("#popDiv").fadeIn(1000);
- });
- }
- function closeDiv(){
- $("#popDiv").fadeOut(1000,function(){
- $("#bg").hide();
- });
- }
这个过程其实比较简单，但本人并不经常搞页面的东西，所以CSS的东西也记不住几个，只能知道点就写下来了。