div 弹出层触发click事件弹出一个新的层

2015/12/02 39227

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>> 

<!doctype html>
<html lang="UTF-8">
<head>
<meta charset="UTF-8">
<title>div 弹出层触发click事件弹出</title>
<style type="text/css">
<!--
html,body {height:100%; margin:0px; font-size:12px;}
.mydiv {
line-height:20px;
border: 1px solid #0080FF;
font-size: 12px;
z-index:999;
width: 500px;
height: 220px;
left:72%;
top:20%;
margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
margin-top:0px;
position:fixed!important;/* FF IE7*/
position:absolute;/*IE6*/
}
</style>
</head>
<body>
<div id="popDiv" class="mydiv" style="display:none;">
<div align="right" style="padding:2px;z-index:2000;font-size:12px;cursor:pointer;position:absolute;right:0;" onclick="closeDivFun()">
<span style="border:1px solid #000;width:12px;height:12px;line-height:12px;text-align:center;display:block;background-color:#FFFFFF;left:-20px;">×</span>
</div>
div弹出窗口信息！<br/>可以在此添加自定义内容<br/>
<a href="javascript:closeDivFun()">关闭窗口</a>
</div>
<a href="javascript:showDivFun()">点击这里弹出层</a>
<script>
//弹出调用的方法
function showDivFun(){
	document.getElementById('popDiv').style.display='block';
}
//关闭事件
function closeDivFun(){
	document.getElementById('popDiv').style.display='none';
}

</script>
 </body>
</html>