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

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

时间：2016-7-21 7:19 热度：10182° 评论：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>