Div+CSS实现始终居中的半透明弹出层
2012-06-08 14:55
661 查看
<!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实现始终居中的半透明弹出层丨网页特效丨CsrCode.Cn </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: 180px;
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*/
}
-->
</style>
<script type="text/javascript">
function showDiv() {
document.getElementById('popDiv').style.display = 'block';
}
function closeDiv() {
document.getElementById('popDiv').style.display = 'none';
}
</script>
</head>
<body>
<div class="header">
<a href="javascript:showDiv()">点击这里弹出层 </a>
</div>
<div id="popDiv" class="mydiv" style="display:none;">
<div style="background-color: blue;height:30px;text-align: left;font-size: 10px;">标题 </div>
<div> 欣雨欢迎你！
<br/>网址：http://www.CsrCode.cn
<br/>
<a href="javascript:closeDiv()">关闭窗口 </a>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div+CSS实现始终居中的半透明弹出层丨网页特效丨CsrCode.Cn </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: 180px;
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*/
}
-->
</style>
<script type="text/javascript">
function showDiv() {
document.getElementById('popDiv').style.display = 'block';
}
function closeDiv() {
document.getElementById('popDiv').style.display = 'none';
}
</script>
</head>
<body>
<div class="header">
<a href="javascript:showDiv()">点击这里弹出层 </a>
</div>
<div id="popDiv" class="mydiv" style="display:none;">
<div style="background-color: blue;height:30px;text-align: left;font-size: 10px;">标题 </div>
<div> 欣雨欢迎你！
<br/>网址：http://www.CsrCode.cn
<br/>
<a href="javascript:closeDiv()">关闭窗口 </a>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Div+CSS实现始终居中的半透明弹出层
- DivCSS+JavaScript实现 始终居中的半透明弹出层
- js+CSS实现弹出居中背景半透明div层的方法
- js+CSS实现弹出居中背景半透明div层的方法
- DIV始终居中的半透明弹出层
- DIV始终居中的半透明弹出层
- html DIV始终垂直居中的半透明弹出层特效源代码下载
- css超简单实现div页面居中【适合做弹出框】
- div非弹出框半透明遮罩实现全屏幕遮盖css实现
- 使用CSS实现DIV成半透明效果，CSS实现层与背景半透明效果。
- JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
- CSS div居中实现
- JS+CSS实现带关闭按钮DIV弹出窗口的方法
- Div 与 CSS 如何实现上下居中 左右居中
- JS+CSS实现Div弹出窗口同时背景变暗的方法
- CSS实现DIV水平居中和上下垂直居中
- div css 伪类 不固定图片大小 居中， css div 实现三角形
- CSS在页面布局中实现div垂直居中的方法总结（转）
- 纯css实现div中单行文字，多行文字，嵌套div垂直水平居中问题
- CSS中position属性之fixed实现div居中