在JavaScript和HTML中使用滑动动画的模式框

<button id="modal-trigger">打开模态框</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <h2>模态框标题</h2>
    <p>这是模态框的内容。</p>
    <button id="close-modal">关闭</button>
  </div>
</div>

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.5s;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal.open {
  display: block;
  opacity: 1;
}

.modal.closed {
  opacity: 0;
}

const modalTrigger = document.getElementById('modal-trigger');
const modal = document.getElementById('modal');
const closeModal = document.getElementById('close-modal');

modalTrigger.addEventListener('click', () => {
  modal.classList.add('open');
});

closeModal.addEventListener('click', () => {
  modal.classList.remove('open');
});