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

2016-7-21 / 1 评论 / 10235 阅读

利用一个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>

    评论一下?

    OωO
    取消
      1. 头像
        宁国房产网
        沙发
        还是很有必要的
        回复