您的位置：首页 > Web前端 > CSS

纯js+css实现页面弹出div

2014-06-20 17:20 721 查看

<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span>

<html>
<head>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<style type="text/css">
.mydiv
{
text-align: center;font-size: 9pt;z-index: 99;width:500px;height:300px;left: 50%;top: 50%;
margin-left: -250px !important;margin-top: -150px !important;margin-top: 0px;position: fixed !important;
position: absolute;
_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*/
}
.SContent-box
{
width:500px;
height:300px;
background:red;
}
.bg
{
background-color: #666;
width: 100%;
height: 100%;
left: 0;
top: 0;
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 1;
position: fixed !important; /*FF IE7*/
position: absolute;
_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 language="javascript" type="text/javascript">
var Itemindex = 0;
function showDiv() {
document.getElementById('popDiv').style.display = 'block';
document.getElementById('bg').style.display = 'block';
}
function closeDiv() {
document.getElementById('popDiv').style.display = 'none';
document.getElementById('bg').style.display = 'none';
}
</script>
</head>
<body>
<div onclick="showDiv()" style="display:block; cursor:pointer">
点击弹出div
</div>
<div id="popDiv" class="mydiv" style="display: none;">

<div class="SContent-box">
<div class="Close_btn">
<a href="javascript:;" onclick="closeDiv()"  style="display:block; cursor:pointer">点击关闭</a>
</div>

</div>
</div>
<div id="bg" class="bg" style="display: none;">
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 弹窗

相关文章推荐

新的分享

章节导航

纯js+css实现 页面弹出div

纯js+css实现页面弹出div