纯css3实现弹窗

2021 年 04 月 24 日

1401 次浏览

1556字数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>纯css实现弹窗</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif
    }

    .button {
      background: bisque;
      color: #fff;
      padding: 10px 25px;
    }

    .modal>input {
      display: none;
    }

    .modal>input~* {
      overflow: hidden;
      max-height: 0;
      opacity: 0
    }

    .modal .overlay {
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: fixed;
      margin: 0;
      border-radius: 0;
      background: rgba(17, 17, 17, 0.6);
      transition: all 0.3s;
      z-index: 100000;
    }

    .modal .overlay~* {
      border: 0;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%) scale(0.2, 0.2);
      z-index: 1000000;
      transition: all .3s ease;
    }

    .main {
      background: #fff;
      padding: 10px;
    }

    .modal>input:checked~* {
      display: block;
      opacity: 1;
      max-height: 10000px;
    }

    .modal>input:checked~.overlay~* {
      max-height: 90%;
      overflow: auto;
      -webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1);
      transform: translateX(-50%) translateY(-50%) scale(1, 1);
    }

  </style>
</head>

<body>
  <label for="modal_1" class="button">显示模态框</label>

  <div class="modal">
    <input type="checkbox" name="" id="modal_1">
    <label for="modal_1" class="overlay"></label>
    <div class="main">
      <p>
        We have a special offer for you. I am sure you will love it! However this does look spammy...
      </p>
    </div>
  </div>

</body>

</html>

纯css3实现弹窗：参考链接https://picnicss.com/documentation#modal

纯css3实现弹窗