操作方法
先实现一个按钮和一个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>
为按钮和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>
给按钮添加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>