一个js弹窗，点击按钮会出窗口，点击x或空白区域或关闭窗口。

截图

点击按钮会出窗口，点击x或空白区域或关闭窗口。

代码

<style>
    .overlay-tecgic {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9999;
    }
    
    .modal-tecgic {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 450px;
      height: 495px;
      background-color: #fff;
      border-radius: 10px;
      z-index: 10000; 
      padding: 25px;
    }
    
    .modal-tecgic .close-tecgic {
      position: absolute;
      top: 11px;
      right: 18px;
      cursor: pointer;
  </style>
 
   <button id="openButton">点击打开弹窗</button>

  <div class="overlay-tecgic"></div>
  
  <div class="modal-tecgic">
    <span class="close-tecgic">&times;</span>
    
    <span style="font-weight: 600;font-size: 18px;">加入车友群</span>
    <p style="margin-top: 7px;color:#6b7280;font-size: 14px;">关注公众号，了解更多玩法和后续更新</p>
    <img src="https://static.bydmax.com/wp-content/uploads/2023/04/7226f296365b4d812ee84d49196dcc0d.jpg" />
    <!-- 这里可以放置弹窗的内容 -->
  </div>

  <script>
    const openButton = document.getElementById('openButton');
    const overlay = document.querySelector('.overlay-tecgic');
    const modal = document.querySelector('.modal-tecgic');
    const closeButton = document.querySelector('.close-tecgic');

    openButton.addEventListener('click', () => {
      overlay.style.display = 'block';
      modal.style.display = 'block';
    });

    closeButton.addEventListener('click', () => {
      overlay.style.display = 'none';
      modal.style.display = 'none';
    });

    overlay.addEventListener('click', (event) => {
      if (event.target === overlay) {
        overlay.style.display = 'none';
        modal.style.display = 'none';
      }
    });

    window.addEventListener('resize', () => {
      if (modal.style.display === 'block') {
        const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        modal.style.top = `${screenHeight / 2}px`;
        modal.style.left = `${screenWidth / 2}px`;
      }
    });
  </script>