javascript点击按钮弹出DIV层

2025-10-28 03:11:48

1、先实现一个按钮和一个div层:

<body>

<div id="div1">

<table>

<tr><td>账号</td><td><input type="text"></td></tr>

<tr><td>密码</td><td><input type="text"></td></tr>

</table>

   <a href="javascript:CloseDiv();">关闭</a>

</div>

<input type="button" value="打开" onclick="javascript:OpenDiv();" id="open">

</body>

2、为按钮和div层添加样式首先将div层隐藏:

<style>

#div1{

display: none;

position: absolute;

left:50%;

top:50%;

width:250px;

height:150px;

background-color:gray;

text-align: center;

}

#open{

position: absolute;

top:50%;

left:50%;

width:100px;

height:50px;

}

</style>

3、给按钮添加onclick事件:

<script>

function OpenDiv(){

document.getElementById("div1").style.display="block";

document.getElementById("open").style.display="none";

}

给div层中的关闭添加onclick事件:

function CloseDiv(){

document.getElementById("div1").style.display="none";

document.getElementById("open").style.display="block";

}

</script>

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢