博客列表 >固定定位:模态框

固定定位:模态框

愿情的博客
愿情的博客原创
2021年03月25日 17:54:22878浏览

1.html

模态框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>固定定位实战:模态框</title>
  8. <link rel="stylesheet" href="modal.css" />
  9. </head>
  10. <body>
  11. <header>
  12. <!-- 页眉 -->
  13. <h2>我的网站</h2>
  14. <button>登录</button>
  15. </header>
  16. <div class="modal">
  17. <!-- 半透明的蒙版遮罩盖住模态框弹层的后面内容 -->
  18. <div class="modal-backdrop"></div>
  19. <!-- 主体 -->
  20. <div class="modal-body">
  21. <!-- 关闭按钮 -->
  22. <button class="close">关闭</button>
  23. <form action="" method="POST">
  24. <table>
  25. <caption>
  26. 用户登录
  27. </caption>
  28. <tr>
  29. <td><label for="usernamel">账号</label></td>
  30. <td><input type="username" name="usernamel" id="username" /></td>
  31. </tr>
  32. <tr>
  33. <td><label for="password">密码</label></td>
  34. <td><input type="password" name="password" id="password" /></td>
  35. </tr>
  36. <tr>
  37. <td><label for="email">邮箱</label></td>
  38. <td><input type="email" name="email" id="email" /></td>
  39. </tr>
  40. <tr>
  41. <td><button>登录</button></td>
  42. </tr>
  43. </table>
  44. </form>
  45. </div>
  46. </div>
  47. <script src="modal.js"></script>
  48. </body>
  49. </html>

2 css

  1. /* 初始化 */
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. }
  7. /* 页眉 */
  8. header {
  9. background-color: #dedede;
  10. padding: 0.5em 2em;
  11. overflow: hidden;
  12. }
  13. header h2 {
  14. float: left;
  15. }
  16. header button {
  17. float: right;
  18. width: 10em;
  19. height: 2.5em;
  20. }
  21. header button:hover {
  22. cursor: pointer;
  23. background-color: azure;
  24. }
  25. /* 模态框 */
  26. /* 遮罩 */
  27. .modal .modal-backdrop {
  28. /* 蒙版必须将弹层的后面全部盖住,意味着与容器大小一样 */
  29. position: fixed;
  30. top: 0;
  31. left: 0;
  32. right: 0;
  33. bottom: 0;
  34. background-color: rgb(0, 0, 0, 0.5);
  35. }
  36. /* 模态框主体 */
  37. .modal .modal-body {
  38. border: 1px solid #000;
  39. padding: 1em;
  40. min-width: 20em;
  41. background-color: lightcyan;
  42. background: linear-gradient(to right, lightcyan, #fff);
  43. /* 将一个块在另一个块中垂直居中 */
  44. position: fixed;
  45. top: 5em;
  46. left: 30em;
  47. right: 30em;
  48. }
  49. .modal .modal-body form {
  50. width: 80%;
  51. }
  52. .modal .modal-body form caption {
  53. font-weight: bolder;
  54. margin-bottom: 1em;
  55. }
  56. .modal .modal-body form td {
  57. padding: 0.5em;
  58. }
  59. .modal .modal-body form table td:first-of-type {
  60. width: 5em;
  61. }
  62. .modal .modal-body form input {
  63. width: 20em;
  64. height: 2em;
  65. }
  66. .modal {
  67. position: relative;
  68. }
  69. .modal .modal-body .close {
  70. position: absolute;
  71. right: 1em;
  72. width: 4eem;
  73. height: 2em;
  74. }
  75. .modal button:hover {
  76. cursor: pointer;
  77. background-color: azure;
  78. }
  79. /* 当页面刚打开的时候,应该将弹窗隐藏 */
  80. .modal {
  81. display: none;
  82. }

3.js

  1. const btn = document.querySelector("header button");
  2. const modal = document.querySelector(".modal");
  3. const close = document.querySelector(".close");
  4. btn.addEventListener("click", setModal, false);
  5. close.addEventListener("click", setModal, false);
  6. function setModal(ev) {
  7. ev.preventDefault();
  8. let status = window.getComputedStyle(modal, null).getPropertyValue("display");
  9. modal.style.display = status === "none" ? "block" : "none";
  10. }
上一条:0324作业下一条:css之flex容器
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议