ASCII码 ASCII码

模态框案例实战

发布于：2022-03-29 11:40:57  栏目：技术文档

页面效果

模态框实战

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_log.css">
  9. </head>
  10. <body>
  11.     <header>
  12.         <h2 class="title">天空的博客</h2>
  13.         <button onclick="showModal()">登录</button>
  14.     </header>
  15.     <!-- 模态框 -->
  16.     <!-- 先写一个盒子 -->
  17.     <div class="modal">
  18.         <!-- 1.半透明的遮罩 -->
  19.         <div class="modal-bg" onclick="closeModal()"></div>
  20.         <!-- 弹层表单 -->
  21.         <form action="" class="modal-form">
  22.             <fieldset style="display: grid; gap: 1em">
  23.                 <legend>用户登录</legend>
  24.                 <input type="email" name="email" placeholder="user@mail.com">
  25.                 <input type="password" name="password" placeholder="不少于6个字符">
  26.                 <button>登录</button>
  27.             </fieldset>
  28.         </form>
  29.     </div>
  30.     <script src="modal.js"></script>
  31. </body>
  32. </html>

CSS代码

  1. /* 初始化 */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. /* 头部 */
  8. header {
  9.     background-color: lightseagreen;
  10.     padding: 0.5em 1em;
  11.     display: flex;
  12. }
  14. /* 标题 */
  15. header .title {
  16.     font-weight: lighter;
  17.     font-style: italic;
  18.     color: white;
  19.     letter-spacing: 2px;
  20.     text-shadow: 1px 1px 1px #555;
  21. }
  23. /* 登录按钮 */
  24. /* 按钮的基本样式 */
  25. header button {
  26.     margin-left: auto;
  27.     /* margin-right: auto; */
  28.     width: 5em;
  29.     border: none;
  30.     border-radius: 0.5em;
  32. }
  33. /* 鼠标移上去的样式 */
  34. header button:hover {
  35.     cursor: pointer;
  36.     background-color: coral;
  37.     color: #fff;
  38.     /*发光效果 box-shadow: 向右 向下 模糊半径 颜色; */
  39.     box-shadow: 0 0 5px #fff;
  40.     /* 过度效果,0.3秒 */
  41.     transition: 0.3s;
  42. }
  44. /* 模态框 */
  45. .modal .modal-form fieldset {
  46.     height: 15.5em;
  47.     background-color: lightcyan;
  48.     border: none;
  49.     padding: 2em 3em;
  50.     box-shadow: 0 0 5px #888;
  51. }
  53. /* 模态框表单标题样式 */
  54. .modal .modal-form fieldset legend {
  55.     padding: 7px 1.5em;
  56.     background-color: lightseagreen;
  57.     color: white;
  58. }
  59. /* 输入框 */
  60. .modal .modal-form fieldset input {
  61.     height: 3em;
  62.     padding-left: 1em;
  63.     outline: none;
  64.     border: 1px solid #ddd;
  65.     font-size: 14px;
  66. }
  68. /* 输入框获得焦点的样式 */
  69. .modal .modal-form fieldset input:focus {
  70.     box-shadow: 0 0 8px #888;
  71.     border: none;
  72. }
  74. /* 登录按钮的样式 */
  75. .modal .modal-form fieldset button {
  76.     background-color: lightseagreen;
  77.     color: white;
  78.     border: none;
  79.     height: 3em;
  80.     font-size: 16px;
  81.     height: 2.5em;
  82. }
  83. .modal .modal-form fieldset button:hover {
  84.     background-color: coral;
  85.     cursor: pointer;
  86.     box-shadow: 0 0 8px #888;
  87.     transition: 00.3s;
  88. }
  90. /* 定位:固定定位:fixed */
  91. .modal .modal-form {
  92.     position: fixed;
  93.     /* 设为定位后就收缩到最左最上了 */
  94.     top: 10em;
  95.     left: 38em;
  96.     right: 38em;
  97. }
  98. /* 遮罩 */
  99. .modal .modal-bg {
  100.     position: fixed;
  101.     /* 坐标全部清零，定位到四个顶点*/
  102.     top: 0em;
  103.     left: 0;
  104.     right: 0;
  105.     bottom: 0;
  106.     background-color: rgb(0, 0, 0, 0.5);
  107.     /* 半透明 */
  108. }
  109. .modal {
  110.     display: none;
  111. }
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行