zoukankan      html  css  js  c++  java
  • 弹窗

    <!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;
             100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            overflow: hidden;
            animation: modalOpen 0.6s;
          }
          .modal-content {
             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>
    

      

  • 相关阅读:
    .net开源工作流ccflow从表数据数据源导入设置
    驰骋开源的asp.net工作流程引擎java工作流 2015 正文 驰骋工作流引擎ccflow6的功能列表
    app:clean classes Exception
    Android Couldn't load BaiduMapSDK
    android okvolley框架搭建
    compileDebugJavaWithJavac
    android重复的文件复制APK META-INF许可证错误记录
    android listview多视图嵌套多视图
    通讯录笔记
    面试总结
  • 原文地址:https://www.cnblogs.com/m-yk/p/10824484.html
Copyright © 2011-2022 走看看