Slideupmodal-overlaybackgroundtokickinstraightaway

将模态框从下方滑入并立即添加遮罩层。

HTML代码：

<button id="open-modal">打开模态框</button>
<div id="overlay"></div>
<div id="modal">
  <h2>这是模态框标题</h2>
  <p>这是模态框内容。</p>
  <button id="close-modal">关闭模态框</button>
</div>

CSS代码：

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-color: #000;
}

#modal {
  display: none;
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 50%;
  padding: 20px;
  background-color: #fff;
  transition: bottom 0.5s ease-in-out;
}

#modal.open {
  bottom: 0;
}

#open-modal {
  margin-top: 20px;
}

#close-modal {
  margin-top: 20px;
}

JavaScript代码：

const openModalBtn = document.getElementById('open-modal');
const closeModalBtn = document.getElementById('close-modal');
const modal = document.getElementById('modal');
const overlay = document.getElementById('overlay');

openModalBtn.addEventListener('click', function() {
  modal.classList.add('open');
  overlay.style.display = 'block';
});

closeModalBtn.addEventListener('click', function() {
  modal.classList.remove('open');
  overlay.style.display = 'none';
});

在这个示例中，使用CSS将模态框定位在页面底部并设置初始状态为不可见。打开模态框时，通过添加“open”类及过渡动画将模态框从底部滑入屏幕中心，同时显示遮罩层。关闭模态框时，通过删除“open”类及过