偶然发现自己原来写了一个CSS遮罩层,虽然这个东西没什么技术含量,但如果本人离开公司后又遇见此类问题,那么可能又得花些时间来找资料了。所以决定还是把它记下来吧。
直接上代码吧。
第一步,html代码:
<div id="popDiv" class="mydiv" style="display:none;">
<div style="text-align:right">
<a href="javascript:closeDiv()">
<img src="/ams/images/yygh_a/close.gif"/>
</a>
</div>
<div id='orgNote' class="note_div"></div>
</div>
<div id="bg" class="bg" style="display:none;"></div>
<div style="margin-left: 180px;">
<a title="即时了解挂号、退号信息" style="margin-left:0px;background-color: #FFFF66;font-size: 16px;text-decoration: underline !important;" href='javascript:showDiv(${doctor.orgId})'>《挂号须知》</a>
</div>
上面的代码由三部分构成,popDiv表示弹出层,即单击“挂号须知”链接时弹出。
而bg表示遮罩层,即弹出层显示时将层后面的内容遮住。最后就是指显示的链接。
这三部分的CSS类如下:
.mydiv {
background-color: #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 {
background-color: #ccc;
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;
position:absolute;/*IE6*/
}
有个部分很重要,那就是bg遮罩层的要覆盖全屏的问题,这个东西比较难解决,所以借助了JQuery来解决,即页面初始化时再设置bg的大小:
$(function(){
$(".bg").width($(document).width());
$('.bg').height($(document).height());
$('.bg').css('left',0);
$('.bg').css('top',0);
});
有了上面的基础之后,只需要在单击链接时通过ajax回调来设置需要显示的数据及遮罩层,如下:
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的东西也记不住几个,只能知道点就写下来了。
分享到:
相关推荐
一个纯 CSS3 实现的遮罩层功能案例,代码亲自写的,代码规范,并且有注释,应用广泛。值得学习
CSS遮罩层mask css制作遮罩层mask.zip
应用移动H5领域。CSS3 实现Loading加载,页面遮罩层的应用。
应用移动H5领域。CSS3 实现Loading加载,页面遮罩层的应用。
利用div+css制作弹出层并遮罩层,主用用了两个div,一个div用于弹出框,另一个则遮罩整个页面
TML遮罩层实现源码,包括html、js、css和图片,并结合loading提示和DIV模拟模态窗口的示例展示遮罩层的使用
这是一款使用html5 svg和css3制作的全屏遮罩导航菜单,这些遮罩层没有固定的大小但是它们全屏覆盖整个屏幕,可以说大小是以你的浏览器为准。默认是绿色背景,你完全可以换成其它颜色,这个不用我细说了吧。 请在现代...
jQuery,CSS实现的遮罩层消息显示,背景变暗,弹出层方式,滑上,滑下。
HTML遮罩层实现源码,包括html、js、css和图片,并结合loading提示和DIV模拟模态窗口的示例展示遮罩层的使用
jquery+css实现的,点击图片或链接弹出遮罩层,并且图片放大展示的一套demo
主要功能是在页面点击“用户登录”,就在当前页面弹出用户登窗口。 这里是用“遮罩层”来实现的。界面也是自己做的。 里面有相应的登录界面的素材。在页面的布局上,你查看本例,也可以学习到很多关于css的知识。
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx
今天我们展示如何用CSS遮罩创建一个有趣又简单但吸引人的过渡效果。与裁剪一样,遮罩是另外一种定义可见性和元素组合的方式。在下面的教程中,我们将向你展示如何应用新属性实现现代转换效果。我们将使用steps()和...
css+js实现部分区域高亮可编辑遮罩层.docx
遮罩层:可以将与遮罩层相链接的图形中的图像遮盖起来。用户可以将多个层组合放在一个遮罩层下,以创建出多样...
小程序中用css实现遮罩弹出层
遮罩层的上方是注册框;此时无法点击页面上除注册框外的其他元素;点击注册框上的”随便逛逛”,遮罩层消失。 预览地址: http://jsfiddle.net/p2x3c7df/embedded/result/ 要点: 1.注册框始终水平、垂直居中,包括...
实际开发中常常少不了使用弹窗,在学习css3的时候我发现可以通过纯css实现带遮罩层可关闭的弹窗。 使用CSS3实现带遮罩层可关闭的弹窗需要用到 :target伪类,::before 、::after伪元素。 实现弹窗的代码: <!...
css3实现的点击按钮弹出无刷新交互遮罩层特效源码是一段实现了点击按钮后会直接弹出一个悬浮的无刷新交互遮罩层效果,在此遮罩层内会出现相关的内容及表单、按钮效果,功能非常强大且实用,本段代码适应于所有网页...
在网页中通过div+css实现半透明效果不难,在winfrom中实现的方法,C#自定义控件半透明遮罩层