简单弹窗```简单的弹窗实现，巴拉巴拉巴拉巴拉很多文字```简单的弹窗实现，巴拉巴拉巴拉巴拉很多文字```简单的弹窗实现

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #open {
      position: absolute;
      z-index: 1001;
      left: 10px;
    }

    #my-mask {
      background-color: #00000066;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1000;
    }

    #modal {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 478px;
      height: 336px;
      background: #ffffff;
      border-radius: 6px;
      z-index: 1002;
      padding: 46px 56px;
    }

    #modal .icon-close {
      position: absolute;
      right: 0;
      top: -52px;
    }

    #modal .title {
      width: 126px;
      height: 18px;
      font-size: 18px;
      color: #000000;
      letter-spacing: 0;
      font-weight: 700;
      margin-bottom: 16px;
    }

    #modal .tips {
      width: 322px;
      height: 14px;
      font-size: 14px;
      color: #444444;
      letter-spacing: 0;
      font-weight: 400;
      margin-bottom: 40px;
    }

    .code-logo {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .code-logo .code {
      text-align: center;
    }

    .code-logo .link {
      font-size: 12px;
      color: #3C6BC9;
      font-weight: 400;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <button id="open">打开</button>
  <div id="my-mask"></div>
  <div id="modal">
    <img id="close" class="icon-close" src="./close.png" alt="close" />
    <div class="title">我的弹窗标题：</div>
    <div class="tips">巴拉巴拉吧的说明文字。</div>
    <div class="code-logo">
      <div class="code">
        <img src="./code.png" alt="code">
        <a class="link" href="http://mobile.10jqka.com.cn/">下载手机同花顺</a>
      </div>
      <img src="./logo.png" alt="pic">
    </div>
  </div>
  <script>
    const mask = document.getElementById("my-mask")//获取mask
    const modal = document.getElementById("modal")//获取modal
    const open = document.getElementById("open")//获取打开按钮
    open.onclick = function close() {
      modal.style.display = 'block'
      mask.style.display = 'block'
    }
    const close = document.getElementById("close")//获取关闭按钮
    close.onclick = function close() {
      modal.style.display = 'none'
      mask.style.display = 'none'
    }
  </script>
</body>

</html>