js模态框实现

使用原生JavaScript实现模态框

通过DOM操作和CSS样式可以创建自定义模态框。以下是一个基础实现方案：

// 创建模态框HTML结构
const modalHTML = `
  <div class="modal" id="myModal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>这里是模态框内容</p>
    </div>
  </div>
`;

// 插入到body
document.body.insertAdjacentHTML('beforeend', modalHTML);

// 获取DOM元素
const modal = document.getElementById("myModal");
const closeBtn = document.querySelector(".close");

// 显示模态框
function openModal() {
  modal.style.display = "block";
}

// 关闭模态框
function closeModal() {
  modal.style.display = "none";
}

// 事件监听
closeBtn.addEventListener("click", closeModal);
window.addEventListener("click", (event) => {
  if (event.target === modal) {
    closeModal();
  }
});

.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;
}

使用Bootstrap模态框

Bootstrap提供了现成的模态框组件，只需引入相关库文件：

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  打开模态框
</button>

<!-- 模态框结构 -->
<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>模态框内容</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

使用第三方库实现

Dialog.js等轻量级库可以提供更多功能：

// 安装：npm install dialog-polyfill
import dialogPolyfill from 'dialog-polyfill';

const dialog = document.querySelector('dialog');
dialogPolyfill.registerDialog(dialog);

// 打开对话框
document.querySelector('#show').onclick = function() {
  dialog.showModal();
};

// 关闭对话框
document.querySelector('dialog button').onclick = function() {
  dialog.close();
};

高级功能实现

实现带动画和表单验证的模态框：

// 动画效果
function toggleModal() {
  modal.classList.toggle('fade-in');
  document.body.classList.toggle('no-scroll');
}

// 表单验证
const form = modal.querySelector('form');
form.addEventListener('submit', (e) => {
  if(!validateForm()) {
    e.preventDefault();
    // 显示错误信息
  }
});

.fade-in {
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

.no-scroll {
  overflow: hidden;
}

每种实现方式各有优劣，原生实现最灵活但开发成本较高，Bootstrap适合快速开发，第三方库则能提供更多现成功能。选择时需考虑项目需求、浏览器兼容性和性能要求。