html中添加一段弹窗代码

HTML 是网页的骨架，而弹窗则是提升用户体验的一种重要方式。在将弹窗嵌入 HTML 页面时，需要用到一些代码技巧。接下来，我们就来学习如何添加一段弹窗代码到 HTML 页面中。

  <style>
    .popup {
      background-color: #f5f5f5;
      border: 2px solid #ccc;
      border-radius: 5px;
      padding: 20px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      z-index: 9999;
    }
    .popup .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
  </style>

  <div class="popup">
    <span class="close-btn">×</span>
    <h2>这里是弹窗标题</h2>
    <p>这里是弹窗内容，可以根据需要进行修改</p>
  </div>

  <script>
    const popup = document.querySelector('.popup');
    const closeBtn = popup.querySelector('.close-btn');

    closeBtn.addEventListener('click',() => {
      popup.style.display = 'none';
    });
  </script>

上述代码通过添加样式和 JavaScript 代码，实现了一个居中显示的弹窗，包括弹窗的标题和内容。其中，JavaScript 代码监听了弹窗的关闭按钮，当用户点击关闭按钮时，弹窗将不再显示。

在实际使用中，可以根据自己的需要进行修改和调整，以实现更为精准的弹窗效果。