css实现点击一个居中的弹窗

CSS实现点击一个居中的弹窗

//HTML代码
<div class="popup-wrapper">
  <div class="popup">
    <h2>欢迎来到我的网站！</h2>
    <p>请注意，这只是一个示例弹窗。</p>
    <button class="close-popup">关闭</button>
  </div>
</div>

//CSS代码
.popup-wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0.3);
  z-index: 999;
}

.popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60%;
  min-width: 300px;
  max-width: 600px;
  height: auto;
  border-radius: 5px;
  padding: 40px;
  background-color: white;
  Box-shadow: 0px 0px 10px 0px rgba(0,0.3);
  z-index: 1000;
}

.close-popup {
  margin-top: 20px;
  background-color: #1E90FF;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

//JavaScript代码
const popupWrapper = document.querySelector('.popup-wrapper');
const popup = document.querySelector('.popup');
const closePopup = document.querySelector('.close-popup');

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

closePopup.addEventListener('click',function() {
  popupWrapper.style.display = 'none';
});

//触发弹窗的代码
const triggerPopup = document.getElementById('trigger-popup');
triggerPopup.addEventListener('click',function() {
  popupWrapper.style.display = 'flex';
});

使用上述代码实现点击一个居中的弹窗功能。CSS代码使用了position属性将弹窗置于页面的最上层，并使用了flex布局将弹窗内容居中显示。JavaScript代码则使用了事件监听器来处理弹窗的显示和关闭。