DivCSS+JavaScript实现 始终居中的半透明弹出层
来源:互联网 发布:百度地图js api 编辑:程序博客网 时间:2024/05/16 12:22
DivCSS+JavaScript实现弹出一个始终居中的半透明层,它可以自动适应浏览器窗口大小,拖动IE滚动条它仍然居中,而且还可以改变它的透明度,和大站的效果是一样的。
先看HTML代码:
再编写CSS样式:
通过JavaScript实现层的隐藏与显示切换:
先看HTML代码:
Example Source Code[www.52css.com]
<div id="popDiv" class="mydiv" style="display:none;">52CSS.com欢迎你!<br/>Q群号:48822948<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>
<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>
再编写CSS样式:
Example Source Code[www.52css.com]
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*/
}
.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*/
}
通过JavaScript实现层的隐藏与显示切换:
Example Source Code[www.52css.com]
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';
}
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';
}
- DivCSS+JavaScript实现 始终居中的半透明弹出层
- Div+CSS实现始终居中的半透明弹出层
- DIV始终居中的半透明弹出层
- html DIV始终垂直居中的半透明弹出层特效源代码下载
- javascript 弹出层始终居中兼容所有浏览器(浏览器缩小自动居中)
- 弹出层居中,滚动条滚动始终在屏幕中间
- DivCSS教程:实现div容器垂直居中的方法小结
- 半透明弹出层的CSS写法
- 弹出居中的div层
- css实现弹出窗口始终垂直水平居中
- Ajax弹出半透明层
- 半透明弹出层
- JavaScript弹出层效果的实现方法
- JavaScript实现带遮罩的弹出层
- js实现遮罩弹出层居中
- jQuery弹出层始终垂直居中,相对于屏幕,相对于当前窗口
- JQuery实现网页半透明弹出层查看图片效果
- JavaScript实现弹出层代码
- 【游戏设计】游戏设计师修炼秘籍 读书笔记一(针对IOS做头脑风暴)
- 开发备必:WEB前端开发规范文档
- U-boot初级学习笔记
- mahout使用KMeans算法
- 【那些年我们用过的C#系列讲座 1】命名空间和我们第一个C#程序
- DivCSS+JavaScript实现 始终居中的半透明弹出层
- 选路技术
- 不同层面上操控I2C进行读写操作
- 用代码安装APK程序
- Python基础--学习笔记1
- CIPADDRESSCTRL 获取本机IP
- 如何生成密钥文件Snk .
- BIOS中英文对照表
- PetShop中.snk文件和AssemblyInfo.cs文件的作用 .