JavaScript实现模态对话框

心已赠人 2022-05-29 14:14 539阅读 0赞

代码演示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style> # 文本框 .content{ height: 1800px; background-color: white; } # 遮挡框 .shade{ position: fixed; top:0; left: 0; right: 0; bottom: 0; background-color: gray; opacity: 0.7; } # 模态框 .model{ width: 200px; height: 200px; background-color: bisque; position: absolute; top:50%; left: 50%; margin-top: -100px; margin-left: -100px; } # 隐藏 .hide{ display: none; } </style>
  7. </head>
  8. <body>
  10. <div class="content">
  11. #  绑定显示事件
  12.     <button onclick="show()">show</button>  
  13.     hellohellohellohellohellohellohellohellohellohellohellohello
  14. </div>
  16. <div class="shade hide"></div>
  18. # 绑定隐藏事件
  19. <div class="model hide">
  20.     <button onclick="cancel()">cancel</button>
  21. </div>
  24. <script> # 设置显示函数 function show() { var ele_shade=document.getElementsByClassName("shade")[0]; var ele_model=document.getElementsByClassName("model")[0]; ele_model.classList.remove("hide"); ele_shade.classList.remove("hide"); } # 设置取消函数 function cancel() { var ele_shade=document.getElementsByClassName("shade")[0]; var ele_model=document.getElementsByClassName("model")[0]; ele_model.classList.add("hide"); ele_shade.classList.add("hide"); } </script>
  25. </body>
  26. </html>

发表评论

表情：
评论列表 （有 0 条评论，539人围观）

还没有评论，来说两句吧...

相关阅读