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">朱老师的blog</h2>
  12.         <button onclick="document.querySelector('.modal').style.display='block'" >登录</button>
  13.     </header>
  15.     <!-- 模态框 -->
  16.     <div class="modal">
  17.         <!-- 1 半透明遮罩 -->
  18.         <div class="modal-bg" onclick="this.parentNode.style.display='none'"></div>
  20.         <!-- 2 弹层表单 -->
  21.         <form action="" class="modal-form">
  22.             <fieldset>
  23.                 <legend>用户登录</legend>
  24.                 <input type="email" name="email" placeholder="usename@emial.com">
  25.                 <input type="password" name="password" placeholder="***********">
  26.             </fieldset>
  27.         </form>
  28.     </div>
  30. </body>
  32. <style>
  33.      /* 初始化 */
  34.      *{
  35.          margin:0;
  36.          padding:0;
  37.          box-sizing: border-box;
  38.      }
  40.      /* 头部样式*/
  41.      header{
  42.          background-color: seagreen;
  43.          display: flex;
  44.          padding: 0.5em 1em;
  45.      }
  47.      header .title{
  48.          font-weight: lighter;
  49.          font-style: italic;
  50.          color:white;
  51.          text-shadow: 1px 1px 1px;
  52.          letter-spacing: 1px;
  53.      }
  55.      header button{
  56.          margin-left:auto;
  57.          width:5em;
  58.          border: none;
  59.          border-radius: 8px;
  60.      }
  62.      header button:hover{
  63.          cursor: pointer;
  64.          background-color: coral;
  65.          color: white;
  66.          box-shadow: 0 0 5px white;
  67.          transition: 0.3s;
  68.      }
  70.      /* 模态框 */
  71.      .modal .modal-form fieldset legend{
  72.          padding: 5px 1em;
  73.          background-color: rebeccapurple;
  74.          color: white;
  75.      }
  78.      /* 表单的固定定位：正中间 */
  79.      .modal .modal-form{
  80.          position: fixed;
  81.          top:10em;
  82.          left:20em;
  83.          right: 20em;
  84.          /* background-color: lightpink; */
  85.      }
  87.      /* 半透明的遮罩 */
  88.      .modal .modal-bg{
  89.          position: fixed;
  90.          /* height: 100px; */
  91.          background-color: rgb(0,0,0,0.5);
  92.          top:0;
  93.          left:0;
  94.          right:0;
  95.          bottom:0;
  98.      }
  99. </style>
  101. </html>