2023-09-04T01:55:15.png

<html>

<head>

    <style>
        /* 弹出框 */
        #popup-box {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          display: none;
        }
        
        .popup-content {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 300px;
          padding: 20px;
          background-color: #fff;
          text-align: center;
        }
        
        .popup-content h3 {
          margin-top: 0;
          margin-bottom: 10px;
        }
        
        .popup-content p {
          margin-top: 0;
          margin-bottom: 20px;
        }
        
        #popup-close {
          padding: 10px 20px;
          background-color: #007bff;
          color: #fff;
          border: none;
          cursor: pointer;
        }
        
    </style>

</head>

<body>
    <div id="popup-box" style="display: none;">
        <div class="popup-content">
            <h3>提示</h3>
            <p>这里是弹出框内容。</p>
            <button id="popup-close">关闭</button>
        </div>
    </div>

    <!-- 按钮 -->
    <button id="popup-btn">弹出框</button>

    <script>
        // 获取需要的元素
        var popupBox = document.getElementById('popup-box');
        var popupBtn = document.getElementById('popup-btn');
        var popupClose = document.getElementById('popup-close');
        
        // 点击按钮弹出框
        popupBtn.addEventListener('click', function() {
          popupBox.style.display = 'block';
        });
        
        // 点击关闭按钮或遮罩层关闭弹出框
        popupClose.addEventListener('click', function() {
          popupBox.style.display = 'none';
        });
        
        popupBox.addEventListener('click', function(e) {
          if (e.target === popupBox) {
            popupBox.style.display = 'none';
          }
        });
        
    </script>
</body>
<div id="transmart-crx-shadow-root" style="all: initial;"></div>

</html>