目标效果:点击页面按钮,显示模态对话框,在模态对话框里点击取消关闭模式对话框。
效果如下
实现代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table> <tr> <td>1</td> <td>2</td> <td> <input type="button" value="点击" οnclick="show()"> </td> </tr> </table> <div id="two" class="c2 hide"></div> <div id="three" class="c3 hide"> 用户名<input type="text"> <br> 密码<input type="password"> <br> <input type="button" value="取消" οnclick="Hide()"> </div> <style> .hide{ display: none; } .c3{ height: 100px; width: 300px; background-color: white; position: fixed; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; z-index: 3; } .c2{ background-color: rgba(0,0,0,0.3); position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 2; } </style> <script type="text/javascript"> function show() { document.getElementById('two').classList.remove('hide'); document.getElementById('three').classList.remove('hide'); } function Hide() { document.getElementById('two').classList.add('hide'); document.getElementById('three').classList.add('hide'); } </script> </body> </html>