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

定位实战：模态框

程序员文章站 2022-05-15 09:17:16
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8" />
    6. 

  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8. 

  8.     <title>定位实战：模态框</title>
    9. 

  9. </head>
    10. 

    11. 

  11. <body>
    12. 

  12.     <header>
    13. 

  13.         <h2 class="title">这是一个测试博客</h2>
    14. 

  14.         <button onclick="document.querySelector('.modal').style.display='block'">
    15. 

  15.         登录
    16. 

  16.       </button>
    17. 

  17.     </header>
    18. 

    19. 

  19.     <!-- 模态框 -->
    20. 

  20.     <div class="modal">
    21. 

  21.         <!-- 1. 半透明遮罩 -->
    22. 

  22.         <div class="modal-bg" onclick="this.parentNode.style.display='none'"></div>
    23. 

    24. 

  24.         <!-- 2.弹层表单 -->
    25. 

  25.         <!-- <form action="" class="modal-form">
    26. 

  26.             <fieledset style="display: grid; gap: 1em">
    27. 

  27.                 <legend>用户登录</legend>
    28. 

  28.                 <input type="email" name="email" />
    29. 

  29.                 <input type="password" name="password" placeholder="**********" />
    30. 

  30.                 <button>登录</button>
    31. 

  31.             </fieledset>
    32. 

  32.         </form> -->
    33. 

    34. 

  34.         <form action="" class="modal-form">
    35. 

  35.             <fieldset style="display: grid; gap: 1em">
    36. 

  36.                 <legend>用户登录</legend>
    37. 

  37.                 <input type="email" name="email" placeholder="user@email.com" />
    38. 

  38.                 <input type="password" name="password" placeholder="不少于6位" />
    39. 

  39.                 <button>登录</button>
    40. 

  40.             </fieldset>
    41. 

  41.         </form>
    42. 

  42.     </div>
    43. 

  43. </body>
    44. 

    45. 

  45. </html>
    46. 

    47. 

  47. <style>
    48. 

  48.     * {
    49. 

  49.         margin: 0;
    50. 

  50.         padding: 0;
    51. 

  51.         box-sizing: border-box;
    52. 

  52.     }
    53. 

  53.     /* 顶部样式 */
    54. 

    55. 

  55.     header {
    56. 

  56.         background-color: lightgreen;
    57. 

  57.         display: flex;
    58. 

  58.         padding: 0.5em 1em;
    59. 

  59.     }
    60. 

    61. 

  61.     header.title {
    62. 

  62.         font-weight: lighter;
    63. 

  63.         font-style: italic;
    64. 

  64.         color: white;
    65. 

  65.         text-shadow: 1px 1px 1px #444;
    66. 

  66.         letter-spacing: 1px;
    67. 

  67.     }
    68. 

    69. 

  69.     header button {
    70. 

  70.         margin-left: auto;
    71. 

  71.         width: 5em;
    72. 

  72.         border: none;
    73. 

  73.         border-radius: 0.5em;
    74. 

  74.     }
    75. 

    76. 

  76.     header button:hover {
    77. 

  77.         cursor: pointer;
    78. 

  78.         background-color: coral;
    79. 

  79.         color: white;
    80. 

  80.         box-shadow: 0 0 8px #fff;
    81. 

  81.         transition: 0.3s;
    82. 

  82.     }
    83. 

  83.     /* 模态框表单 */
    84. 

    85. 

  85.     .modal.modal-form fieldset {
    86. 

  86.         padding: 5px 1em;
    87. 

  87.         background-color: lightcyan;
    88. 

  88.         border: none;
    89. 

  89.         padding: 2em;
    90. 

  90.         box-shadow: 0 0 5px #888;
    91. 

  91.     }
    92. 

  92.     /* 模态框表单标题 */
    93. 

    94. 

  94.     .modal.modal-form fieldset legend {
    95. 

  95.         padding: 5px 1em;
    96. 

  96.         background-color: rebeccapurple;
    97. 

  97.         color: white;
    98. 

  98.     }
    99. 

  99.     /* 表单：固定定位 */
    100. 

    101. 

  101.     .modal .modal-form {
    102. 

  102.         position: fixed;
    103. 

  103.         top: 10em;
    104. 

  104.         left: 20em;
    105. 

  105.         right: 20em;
    106. 

  106.     }
    107. 

  107.     /* 遮罩：固定定位 */
    108. 

    109. 

  109.     .modal .modal-bg {
    110. 

  110.         position: fixed;
    111. 

  111.         height: 100px;
    112. 

  112.         top: 0;
    113. 

  113.         left: 0;
    114. 

  114.         right: 0;
    115. 

  115.         bottom: 0;
    116. 

  116.         background-color: red;
    117. 

  117.     }
    118. 

  118.     /* 初始化时，将模态框弹出隐藏 */
    119. 

    120. 

  120.     .modal {
    121. 

  121.         display: none;
    122. 

  122.     }
    123. 

  123. </style>
    124.

上一篇： 模板字面量和闭包函数

下一篇： flex布局，术语和项目

推荐阅读