绝对定位与固定定位——模态框案例 - web前端

首页 > 博客列表 > 绝对定位与固定定位——模态框案例

博主信息

博文 48

粉丝 0

访问量 55102

专题推荐

更多>

登录是使用遮罩功能——模态框

页头部分

html:

 <header>
    <h2>我的博客</h2>
    <button onclick="document.querySelector('.modal').style.display='block'">
      登录
    </button>
  </header>

css

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #eee;
    }
    header {
      background-color: lightseagreen;
      padding: 0.5em 1em;
      display: flex;
    }
    header button {
      margin-left: auto;
      width: 4em;
    }

模态框部分

html:

 <div class="modal">
      <!-- 半透明的遮罩 -->
      <div
        class="modal-bg"
        onclick="this.parentNode.style.display='none'"
      ></div>
      <form action="" class="modal-form">
        <fieldset>
          <legend>用户登录</legend>
          <div>
            <label for=""> 用户名： </label>
            <input type="text" />
          </div>
          <div>
            <label for="">密码：</label>
            <input type="password" />
          </div>
          <div><button>登录</button></div>
        </fieldset>
      </form>
    </div>

CSS:

.modal {
        position: relative;
      }
      .modal .modal-form fieldset {
        background-color: lightcyan;
        border: none;
        padding: 2em;
        box-shadow: 0 0 5px #888;
      }
      .modal .modal-form fieldset legend {
        padding: 5px 1em;
        background-color: rebeccapurple;
        color: white;
      }
      .modal .modal-form {
        position: fixed;
        top: 10em;
        left: 20em;
        right: 20em;
      }
      .modal .modal-bg {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgb(0, 0, 0, 0.5);
      }
      .modal {
        display: none;
      }