js模态框实现

使用原生JavaScript实现模态框

创建一个基本的模态框需要HTML结构、CSS样式和JavaScript交互逻辑。以下是一个简单实现方式：

HTML部分：

<button id="modalBtn">打开模态框</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>这是模态框内容</p>
  </div>
</div>

CSS样式：

.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%;
  max-width: 600px;
}

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

JavaScript逻辑：

const modal = document.getElementById("myModal");
const btn = document.getElementById("modalBtn");
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";
  }
}

使用Bootstrap实现模态框

Bootstrap提供了现成的模态框组件，使用更加简便：

HTML结构：

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

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

JavaScript初始化（如果使用jQuery）：

$('#exampleModal').modal('show'); // 显示模态框
$('#exampleModal').modal('hide'); // 隐藏模态框

使用第三方库实现高级模态框

对于更复杂的需求，可以考虑使用专门的模态框库：

1. SweetAlert2 - 提供美观的弹窗和模态框

   

   Swal.fire({
   title: '自定义模态框',
   html: '<p>支持HTML内容</p>',
   showCancelButton: true,
   confirmButtonText: '确定',
   cancelButtonText: '取消'
   })

2. Micromodal - 轻量级无依赖模态框库

   MicroModal.init();
   MicroModal.show('modal-id');

实现模态框的最佳实践

确保模态框具有良好的可访问性：

• 添加role="dialog"和aria-labelledby属性
• 管理焦点，使Tab键只在模态框内循环
• 关闭时恢复之前的焦点

动画效果增强用户体验：

.modal-content {
  animation: modalopen 0.5s;
}

@keyframes modalopen {
  from {opacity: 0; transform: translateY(-50px)}
  to {opacity: 1; transform: translateY(0)}
}

响应式设计考虑：

@media (max-width: 600px) {
  .modal-content {
    width: 95%;
    margin: 10% auto;
  }
}