js 实现模态窗口

2026-04-07 10:42:00JavaScript

模态窗口的基本实现

使用HTML和CSS创建模态窗口的结构和样式。模态窗口通常包含一个遮罩层和一个内容区域。

<div class="modal" id="myModal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>这里是模态窗口内容</p>
  </div>
</div>

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

控制模态窗口的显示和隐藏

通过JavaScript控制模态窗口的显示和隐藏功能。为按钮添加点击事件来触发模态窗口。

// 获取模态窗口元素
const modal = document.getElementById("myModal");
// 获取打开模态窗口的按钮
const btn = document.getElementById("myBtn");
// 获取关闭按钮
const span = document.getElementsByClassName("close")[0];

// 点击按钮打开模态窗口
btn.onclick = function() {
  modal.style.display = "block";
}

// 点击关闭按钮隐藏模态窗口
span.onclick = function() {
  modal.style.display = "none";
}

// 点击模态窗口外部区域关闭窗口
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

使用classList优化显示控制

使用classList方法替代直接操作style属性，可以更好地管理样式。

js 实现模态窗口

// 显示模态窗口
function openModal() {
  modal.classList.add('show');
  modal.classList.remove('hide');
}

// 隐藏模态窗口
function closeModal() {
  modal.classList.add('hide');
  modal.classList.remove('show');
}

对应的CSS需要添加以下样式：

.modal.show {
  display: block;
}

.modal.hide {
  display: none;
}

添加动画效果

为模态窗口添加淡入淡出动画效果，提升用户体验。

js 实现模态窗口

.modal-content {
  animation-name: animatetop;
  animation-duration: 0.4s;
}

@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

使用Promise实现异步模态窗口

创建一个返回Promise的模态窗口函数，可以在窗口关闭后执行特定操作。

function showModal() {
  return new Promise((resolve) => {
    const modal = document.getElementById("myModal");
    modal.style.display = "block";

    const closeHandler = () => {
      modal.style.display = "none";
      document.removeEventListener('keydown', escapeHandler);
      resolve();
    };

    const escapeHandler = (e) => {
      if (e.key === 'Escape') closeHandler();
    };

    document.querySelector('.close').onclick = closeHandler;
    document.addEventListener('keydown', escapeHandler);
    window.onclick = function(event) {
      if (event.target == modal) closeHandler();
    };
  });
}

// 使用示例
showModal().then(() => {
  console.log('模态窗口已关闭');
});

使用ES6类封装模态窗口

创建一个可重用的Modal类，便于在项目中多次使用。

class Modal {
  constructor(modalId) {
    this.modal = document.getElementById(modalId);
    this.init();
  }

  init() {
    this.modal.querySelector('.close').onclick = () => this.close();
    window.onclick = (event) => {
      if (event.target === this.modal) this.close();
    };
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') this.close();
    });
  }

  open() {
    this.modal.style.display = 'block';
  }

  close() {
    this.modal.style.display = 'none';
  }
}

// 使用示例
const myModal = new Modal('myModal');
document.getElementById('myBtn').onclick = () => myModal.open();