jiangzaiwu的gravatar头像
jiangzaiwu2012-10-15 11:01:40

html DIV始终垂直居中的半透明弹出层特效源代码下载

html DIV始终垂直居中的半透明弹出层特效

html DIV始终垂直居中的半透明弹出层特效源代码下载

<!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>始终居中的弹出层-www.zuidaima.com-最代码</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;">最代码网站欢迎你!<br/>网站:http://www.zuidaima.com/<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>


最代码官方编辑于2014-8-27 15:54:46


打赏

文件名:DIV始终居中的半透明弹出层.rar,文件大小:1K下载
  • /
    • /DIV始终居中的半透明弹出层.htm
最代码最近下载分享源代码列表最近下载
疾风知劲草 LV82021年3月10日
月亮月亮
1814080902304 LV42021年1月5日
月亮
tsy666666 LV82020年3月1日
月亮月亮
1910356574 LV142020年1月2日
月亮月亮月亮星星星星
yangtongyong LV142019年11月6日
月亮月亮月亮星星星星
ranqingju588888 LV82019年2月12日
月亮月亮
1718142421 LV12018年12月29日
星星
1647859661 LV12018年12月29日
星星
木水包 LV162018年7月3日
太阳
2309094456 LV122018年3月29日
月亮月亮月亮
最代码最近浏览分享源代码列表最近浏览
小熊专属 LV32021年12月15日
星星星星星星
qyxs6662021年7月12日
暂无贡献等级
nibin576 LV62021年3月11日
月亮星星星星
疾风知劲草 LV82021年3月10日
月亮月亮
喵小兵 LV102021年3月9日
月亮月亮星星星星
zui07272021年1月28日
暂无贡献等级
1814080902304 LV42021年1月5日
月亮
张胜男 LV12020年12月10日
星星
秦sir3067683450 LV102020年10月30日
月亮月亮星星星星
sjl20000221 LV22020年9月8日
星星星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友