弹窗

最新推荐文章于 2024-05-18 17:50:56 发布

weixin_30532987

最新推荐文章于 2024-05-18 17:50:56 发布

阅读量73

点赞数

原文链接：http://www.cnblogs.com/m-yk/p/10824484.html

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
      }
      button {
        border: 0;
        padding: 1em 2em;
        background: coral;
        color: #fff;
        outline: none;
      }
      button:hover {
        background: #333;
      }
      .modal {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        overflow: hidden;
        animation: modalOpen 0.6s;
      }
      .modal-content {
        width: 80%;
        margin: 100px auto;
        background: #f4f4f4;
        box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2),
          0 7px 20px 0 rgba(0, 0, 0, 0.5);
      }
      .modal-header {
        background: coral;
        color: #fff;
        display: flex;
        padding: 0px 16px;
      }
      .modal-header h3 {
        height: 50px;
        line-height: 50px;
        flex: 1;
      }
      .modal-header span {
        display: block;
        height: 50px;
        line-height: 50px;
        font-size: 30px;
        cursor: pointer;
      }
      .modal-body {
        padding: 5px 15px;
        line-height: 1.6em;
      }
      .modal-footer {
        padding: 0px 15px;
        background: coral;
        color: #fff;
      }
      .modal-footer p {
        height: 40px;
        line-height: 40px;
      }
      @keyframes modalOpen {
        from {
          opacity: 0;
        }

        to {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <button class="open-btn">弹窗</button>
    <div class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>弹窗头部</h3>
          <span class="close-btn">×</span>
        </div>
        <div class="modal-body">
          <h3>body</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
            voluptatibus omnis, iste sunt maiores eius iusto error mollitia
            deleniti, temporibus explicabo est tenetur facilis consequuntur
            deserunt molestias rem adipisci id? Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Est nostrum, natus provident minima
            libero, excepturi fugit quae voluptatum cumque amet, tempore aliquid
            id. Ad mollitia itaque aperiam repudiandae, aliquam ea!
          </p>
        </div>
        <div class="modal-footer">
          <p>弹窗底部</p>
        </div>
      </div>
    </div>
    <script>
      var closeBtn = document.querySelector(".close-btn");
      var openBtn = document.querySelector(".open-btn");
      var modal = document.querySelector(".modal");
      var modalContent = document.querySelector(".modal-content");
      closeBtn.addEventListener("click", closeModal);
      openBtn.addEventListener("click", openModal);
      modal.addEventListener("click", closeModal);
      modalContent.addEventListener("click", function(e) {
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
      function closeModal() {
        modal.style.display = "none";
      }
      function openModal() {
        modal.style.display = "block";
      }
    </script>
  </body>
</html>

转载于:https://www.cnblogs.com/m-yk/p/10824484.html