如何创建弹出式面板使用JavaScript和CSS，没有库？

<button id="popupBtn">点击弹出面板</button>
<div id="popupContainer">
  <div id="popupContent">
    <!-- 弹出内容 -->
  </div>
</div>

#popupContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: none; /* 隐藏面板容器 */
}

#popupContent {
  background-color: #fff;
  width: 300px;
  height: 200px;
  margin: 100px auto; /* 居中显示 */
  padding: 20px;
}

var popupBtn = document.getElementById('popupBtn');
var popupContainer = document.getElementById('popupContainer');

popupBtn.addEventListener('click', function() {
  popupContainer.style.display = 'block';
});

popupContainer.addEventListener('click', function(e) {
  if (e.target === popupContainer) {
    popupContainer.style.display = 'none';
  }
});