欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

定位实战:模态框

程序员文章站 2022-05-01 21:52:31
...
  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. </head>
  9. <body>
  10. <header>
  11. <h2 class="title">这是一个测试博客</h2>
  12. <button onclick="document.querySelector('.modal').style.display='block'">
  13. 登录
  14. </button>
  15. </header>
  16. <!-- 模态框 -->
  17. <div class="modal">
  18. <!-- 1. 半透明遮罩 -->
  19. <div class="modal-bg" onclick="this.parentNode.style.display='none'"></div>
  20. <!-- 2.弹层表单 -->
  21. <!-- <form action="" class="modal-form">
  22. <fieledset style="display: grid; gap: 1em">
  23. <legend>用户登录</legend>
  24. <input type="email" name="email" />
  25. <input type="password" name="password" placeholder="**********" />
  26. <button>登录</button>
  27. </fieledset>
  28. </form> -->
  29. <form action="" class="modal-form">
  30. <fieldset style="display: grid; gap: 1em">
  31. <legend>用户登录</legend>
  32. <input type="email" name="email" placeholder="user@email.com" />
  33. <input type="password" name="password" placeholder="不少于6位" />
  34. <button>登录</button>
  35. </fieldset>
  36. </form>
  37. </div>
  38. </body>
  39. </html>
  40. <style>
  41. * {
  42. margin: 0;
  43. padding: 0;
  44. box-sizing: border-box;
  45. }
  46. /* 顶部样式 */
  47. header {
  48. background-color: lightgreen;
  49. display: flex;
  50. padding: 0.5em 1em;
  51. }
  52. header.title {
  53. font-weight: lighter;
  54. font-style: italic;
  55. color: white;
  56. text-shadow: 1px 1px 1px #444;
  57. letter-spacing: 1px;
  58. }
  59. header button {
  60. margin-left: auto;
  61. width: 5em;
  62. border: none;
  63. border-radius: 0.5em;
  64. }
  65. header button:hover {
  66. cursor: pointer;
  67. background-color: coral;
  68. color: white;
  69. box-shadow: 0 0 8px #fff;
  70. transition: 0.3s;
  71. }
  72. /* 模态框表单 */
  73. .modal.modal-form fieldset {
  74. padding: 5px 1em;
  75. background-color: lightcyan;
  76. border: none;
  77. padding: 2em;
  78. box-shadow: 0 0 5px #888;
  79. }
  80. /* 模态框表单标题 */
  81. .modal.modal-form fieldset legend {
  82. padding: 5px 1em;
  83. background-color: rebeccapurple;
  84. color: white;
  85. }
  86. /* 表单:固定定位 */
  87. .modal .modal-form {
  88. position: fixed;
  89. top: 10em;
  90. left: 20em;
  91. right: 20em;
  92. }
  93. /* 遮罩:固定定位 */
  94. .modal .modal-bg {
  95. position: fixed;
  96. height: 100px;
  97. top: 0;
  98. left: 0;
  99. right: 0;
  100. bottom: 0;
  101. background-color: red;
  102. }
  103. /* 初始化时,将模态框弹出隐藏 */
  104. .modal {
  105. display: none;
  106. }
  107. </style>