CSS实现简易模态框教程详解

  

  

    
提示信息
    
这是一个简易弹窗。
    关闭
  

.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); / 半透明黑 /
}
.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 90%;
z-index: 1;
}

// 显示弹窗
document.querySelector('.modal').style.display = 'flex';
// 关闭按钮事件
document.querySelector('.close-btn').addEventListener('click', function() {
document.querySelector('.modal').style.display = 'none';
});

document.querySelector('.modal-overlay').addEventListener('click', function() {
  this.parentElement.style.display = 'none';
});