实现简单的类似Lightbox效果的弹出对话框
相信LightBox之类的页面弹出窗口，大家在浏览的时候也应该是很常见的，实现起来也不算太困难，CG今天把在上次发布的ETP项目源代码中的JS部分提取出来，方便大家学习和使用。
实现原理：利用DIV的浮动和层的重叠，将对话框的Z-index设置为最高就可以了另外对于遮罩层来说，只要使遮罩层在对话框层之下，其他页面元素之上即可，如果需要美观的话，可以设置半透明效果。
CSS代码如下：
/*消息框*/ #messageBox{ position:absolute; border:2px solid #3B5A6E; background-color:#FFFFCC; display:none; z-index:9999; /*显示对话框置前*/ margin:0; padding:0; } /*消息框标题*/ #messageBox h2{ font-size:12px; /*图片形式*/ background:url(top.gif); border-bottom:1px solid #3B5A6E; margin:0; color:#FFFFFF; padding:6px 10px 4px 10px; } /*遮罩层*/ #messageBoxMask{ position:absolute; top:0; /*从(0，0)开始*/ left:0; background-color:#CCCCCC; /*以下控制透明效果，IE、FF*/ filter:alpha(opacity=50); /*IE*/ -moz-opacity:0.5; /* 兼容老版本的FF */ opacity:0.5; /* Mozila兼容 */ z-index:9998; /*遮罩置前*/ display:none; margin:0; padding:0; } |
测试源代码下载地址：
http://www.lidaren.com/code/MsgBox.zip
Recent Comments