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

首页 > IT计算机 > Web程序设计作者：RainFly 2016年7月21日 15:19 星期四热度：9948° 字号：小中大评论：1

时间：2016-7-21 15:19 热度：9948° 评论：1 条

利用一个button，实现关于click触发新的弹出样式层（其实实际上就是将style="display:none;或者display:block;" ）

当然需用用到js函数function showDivFun() 和function closeDivFun() 直接通过herf方式触发！

<head>

<title>div 弹出层触发click事件弹出</title>

.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 onclick="closeDivFun()">
<span>×</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>