<div class="modal-overlay" id="modal">
  <div class="modal-content">
    <p>这是一个提示弹窗！</p>
    <button onclick="closeModal()">关闭</button>
  </div>
</div>

.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;              /* 初始完全透明 */
  pointer-events: none;    /* 不响应点击事件 */
  transition: opacity 0.3s ease;
}
<p>.modal-content {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: scale(0.9);   /<em> 初始缩小 </em>/
transition: transform 0.3s ease;
}</p>

.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
<p>.modal-overlay.show .modal-content {
transform: scale(1);     /<em> 放大到正常尺寸 </em>/
}</p>

function showModal() {
  document.getElementById('modal').classList.add('show');
}
<p>function closeModal() {
document.getElementById('modal').classList.remove('show');
}</p><p>// 示例：页面加载后 1 秒自动弹出
setTimeout(showModal, 1000);</p>

document.getElementById('modal').addEventListener('click', function(e) {
  if (e.target === this) {
    closeModal();
  }
});

.modal-content {
  transform: translateY(-20px) scale(0.9);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
<p>.modal-overlay.show .modal-content {
transform: translateY(0) scale(1);
}</p>