Html-Css-div透明层剧中
2015-06-01 15:06
537 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Div+CSS实现始终居中的半透明弹出层</title> <style type="text/css"> <!-- html, body { height: 100%; margin: 0px; font-size: 12px; } .mydiv { background-color: #FFCC66; border: 1px solid #f00; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index: 999; width: 300px; height: 120px; left: 50%; top: 50%; margin-left: -150px !important; /*FF IE7 该值为本身宽的一半 */ margin-top: -60px !important; /*FF IE7 该值为本身高的一半*/ margin-top: 0px; position: fixed !important; /* FF IE7*/ position: absolute; /*IE6*/ _top: expression(eval(document.compatMode && document.compatMode == 'CSS1Compat')? documentElement.scrollTop+ (document.documentElement.clientHeight-this.offsetHeight)/2: /*IE6*/ document.body.scrollTop+ (document.body.clientHeight- this.clientHeight)/2); /*IE5 IE5.5*/ } .bg, .popIframe { background-color: #666; display: none; width: 100%; height: 100%; left: 0; top: 0; /*FF IE7*/ filter: alpha(opacity = 50); /*IE*/ opacity: 0.5; /*FF*/ z-index: 1; position: fixed !important; /*FF IE7*/ position: absolute; /*IE6*/ _top: expression(eval(document.compatMode && document.compatMode == 'CSS1Compat')? documentElement.scrollTop+ (document.documentElement.clientHeight-this.offsetHeight)/2: /*IE6*/ document.body.scrollTop+ (document.body.clientHeight- this.clientHeight)/2); } .popIframe { filter: alpha(opacity = 0); /*IE*/ opacity: 0; /*FF*/ } --> </style> <script language="javascript" type="text/javascript"> function showDiv() { document.getElementById('popDiv').style.display = 'block'; document.getElementById('popIframe').style.display = 'block'; document.getElementById('bg').style.display = 'block'; } function closeDiv() { document.getElementById('popDiv').style.display = 'none'; document.getElementById('bg').style.display = 'none'; document.getElementById('popIframe').style.display = 'none'; } </script> </head> <body> <div id="popDiv" class="mydiv" style="display: none;"> aaaaaaaaa <br> <a href="javascript:closeDiv()">关闭窗口</a> </div> <div id="bg" class="bg" style="display: none;"></div> <a href="javascript:showDiv()">点击这里弹出层</a> <iframe id='popIframe' class='popIframe' frameborder='0'></iframe> </body> </html>
相关文章推荐
- 段落排版-css
- css文字超出部分显示省略号
- 应该学习css的几个理由
- 一个CSS3滤镜Drop-shadow阴影效果
- 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
- 用css3实现自定义效果复选框--不用js
- CSS阴影效果(Box-shadow)用法趣味讲解
- DIV+CSS两种盒子模型(W3C盒子与IE盒子)
- CSS3 overflow属性默认为visible,父元素高度为0,如果子元素有内容高度不为0也会显示,需将overflow设为hidden
- css :before :after
- CSS两列布局
- CSS clip:rect矩形剪裁功能及一些应用介绍
- css hack处理
- css 伪类/元素
- CSS代码让Table产生固定表头
- 做带缩略图的轮播切换涉及到的知识点——水平垂直居中、css样式重置、滤镜背景透明效果等
- 高性能 CSS3 动画
- css3边框阴影效果
- CSS盒模型简单用法
- div 布局 (css)