
利用一个button,实现关于click触发新的弹出样式层(其实实际上就是将style="display:none;或者display:block;" )
当然需用用到js函数function showDivFun() 和function closeDivFun() 直接通过herf方式触发!
<html lang="UTF-8">
<head>
<meta charset="UTF-8">
<title>div 弹出层触发click事件弹出</title>
<style type="text/css">
.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>



本文地址:https://www.rainfly.cn/?post=193
版权声明:若无注明,本文皆为“雨夜轩”原创,转载请保留文章出处。

还有小板凳哦!