在HTML/JS和CSS中显示一个打开弹出窗口的按钮？

<button id="popupButton">打开弹出窗口</button>

<div id="popupContainer">
  <div id="popupContent">
    <!-- 弹出窗口内容 -->
    <h2>这是一个弹出窗口</h2>
    <p>欢迎使用弹出窗口功能！</p>
    <button id="closeButton">关闭</button>
  </div>
</div>

#popupContainer {
  display: none; /* 初始状态隐藏弹出窗口容器 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  z-index: 9999; /* 设置较高的层级 */
}

#popupContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

#closeButton {
  margin-top: 10px;
}

// 获取按钮和弹出窗口容器
var popupButton = document.getElementById('popupButton');
var popupContainer = document.getElementById('popupContainer');

// 点击按钮时显示弹出窗口
popupButton.addEventListener('click', function() {
  popupContainer.style.display = 'block';
});

// 点击关闭按钮时隐藏弹出窗口
var closeButton = document.getElementById('closeButton');
closeButton.addEventListener('click', function() {
  popupContainer.style.display = 'none';
});