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
最代码最近下载分享源代码列表最近下载
tsy666666 LV83月1日
月亮月亮
1910356574 LV141月2日
月亮月亮月亮星星星星
yangtongyong LV132019年11月6日
月亮月亮月亮星星
ranqingju588888 LV82019年2月12日
月亮月亮
1718142421 LV12018年12月29日
星星
1647859661 LV12018年12月29日
星星
木水包 LV162018年7月3日
太阳
2309094456 LV122018年3月29日
月亮月亮月亮
wangqyini LV22017年12月7日
星星星星
最代码官方 LV1552017年10月12日
皇冠皇冠太阳月亮月亮星星星星星星
最代码最近浏览分享源代码列表最近浏览
秦sir3067683450 LV210月30日
星星星星
sjl20000221 LV29月8日
星星星星
jiyuanbin LV17月9日
星星
lyx12138lyx LV16月22日
星星
nothingjjjjjj LV35月31日
星星星星星星
john5205月29日
暂无贡献等级
渐渐贱贱 LV15月20日
星星
7561241365月6日
暂无贡献等级
adminxu LV135月3日
月亮月亮月亮星星
dengkaixing LV14月16日
星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友