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

【转载】JS+CSS实现带关闭按钮的DIV弹出窗口

2016-10-25 17:43 791 查看

<html>
<head>
<title>JS+CSS实现带关闭按钮的DIV弹出窗口</title>
<script>
function    locking(){
document.all.ly.style.display="block";
document.all.ly.style.width=document.body.clientWidth;
document.all.ly.style.height=document.body.clientHeight;
document.all.Layer2.style.display='block';
}
function    Lock_CheckForm(theForm){
document.all.ly.style.display='none';document.all.Layer2.style.display='none';
return   false;
}
</script>
<style type="text/css">

</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<p align="center">
<input type="button" value="弹出DIV" onClick="locking()" />
</p>
<div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
z-index: 2; left: 0px; display: none;">
</div>

<div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/10);
background-color: #fff; display: none;" >
<table width="540" height="300" border="0" cellpadding="0" cellspacing="0" style="border: 0    solid    #e7e3e7;
border-collapse: collapse ;" >
<tr>
<td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px;
font-weight: bold; font-size: 12px;" height="10" valign="middle">
<div align="right"><a href=JavaScript:; class="STYLE1" onClick="Lock_CheckForm(this);">[关闭]</a>     </div></td>
</tr>
<tr>
<td height="130" align="center">
</td>
</tr>
</table>
</div>

</body>
</html>

第二个：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#greyLayer{position:absolute;top:0;left:0;background-color:#fff;display:none;opacity:.5;filter:alpha(opacity=50)}
#privacyLayer{width:800px;height:500px;border:1px solid #656451;position:absolute;top:200px;left:300px;background-color:#fff;display:none;z-index:10000; text-align:center;}
#privacyLayer .title{line-height:30px;font-weight:bold;padding:0;margin:0;font-size:16px;text-align:center;background-color:#FFFFCF;border-bottom:1px solid #656451}
#privacyLayer .con{}
#privacyLayer .btn{line-height:20px;text-align:center;margin-top:20px;}
#privacyLayer .r{line-height:40px;color:#000;font-weight:bold;font-size:14px;}
#privacyLayer .c{line-height:40px;color:#000;font-size:13px;}
</style>
</head>
<body>
<div><a href="javascript:void(0);" onclick="openPrivacyLayer()">显示</a></div>
<div style="width:100%; height:500px;background-color:#cc0000;"></div>
<div><a href="javascript:void(0);" onclick="openPrivacyLayer()">显示</a></div>
<div style="width:100%; height:500px;background-color:#cc0000;"></div>
<div><a href="javascript:void(0);" onclick="openPrivacyLayer()">显示</a></div>
<div style="width:100%; height:500px;background-color:#cc0000;"></div>
<div><a href="javascript:void(0);" onclick="openPrivacyLayer()">显示</a></div>
<div style="width:100%; height:500px;background-color:#cc0000;"></div>
<script type="text/javascript">
function openPrivacyLayer(){
var greyLayer = document.getElementById('greyLayer');
with(greyLayer.style){
display = 'block';
height = document.body.scrollHeight+'px';
width = document.body.scrollWidth+'px';
}
var top1;
var left1;
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
{
diffY = document.documentElement.scrollTop;
left1 = document.documentElement.scrollLeft;
//alert(diffY);
}
else if (document.body){
diffY = document.body.scrollTop;
left1 = document.body.scrollLeft;
//alert(diffY);
}
else
{/*Netscape stuff*/}
var privacyLayer = document.getElementById('privacyLayer');
var xWidth = privacyLayer.currentStyle.width;
var xHeight = privacyLayer.currentStyle.height;
if (xWidth == 'null' || xWidth == '')
{
xWidth = window.getComputedStyle(privacyLayer,null).style.width;
xHeight = window.getComputedStyle(privacyLayer,null).style.width;
}
xWidth = parseInt(xWidth.replace("px",""),10);
xHeight = parseInt(xHeight.replace("px",""),10);
//alert(xHeight);
with(privacyLayer.style){
display = 'block';
left = left1+((window.innerWidth || document.documentElement && document.documentElement.clientWidth || document.body.offsetWidth)-xWidth)/2+'px';
top = diffY + ((window.innerHeight || document.documentElement && document.documentElement.clientHeight || document.body.offsetHeight)-xHeight)/2+'px';
}
}
function closePrivacy(){
document.getElementById('greyLayer').style.display = 'none';
document.getElementById('privacyLayer').style.display = 'none';
}
</script>

<iframe id="greyLayer" frameborder="0"></iframe>
<div id="privacyLayer">
<h1 class="title">
欢迎</h1>
<div class="r">
欢迎</div>
<div class="c">
欢迎
欢迎
欢迎
欢迎</div>
<div id="privacyContent" class="con">
<div cols="80" rows="25" wrap="virtual" style="width:90%;font-size:14.9px;height:320px;" readonly="readonly">
欢迎
欢迎
欢迎
欢迎
欢迎
欢迎
欢迎
欢迎
欢迎
欢迎
</div>
</div>
<div class="btn"><button onclick="closePrivacy()">阅读完毕，关闭窗口</button></div>
</div>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航