Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > HTML Tutorial > body text

CSS遮罩层的实现_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:52:02

Original

1832 people have browsed it

偶然发现自己原来写了一个CSS遮罩层，虽然这个东西没什么技术含量，但如果本人离开公司后又遇见此类问题，那么可能又得花些时间来找资料了。所以决定还是把它记下来吧。
直接上代码吧。
第一步，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的东西也记不住几个，只能知道点就写下来了。

Related labels：

CSS遮罩层的实现

source：php.cn

Previous article：ASP如何实现注册后发送激活邮件？_html/css_WEB-ITnose Next article：如何将旋转90度的div中的每一个字再旋转回来_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn