javascript点击按钮弹出DIV层

2025-04-30 04:19:26

1、先实现一个按钮和一个div层：<body> <div id="div1"> <tab造婷用痃le> <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。