js实现modal弹出

使用原生JavaScript实现Modal弹出框

通过display属性控制Modal的显示与隐藏
创建HTML结构，包含Modal容器、内容区和关闭按钮

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

添加CSS样式定义Modal外观

.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 span = document.getElementsByClassName("close")[0];

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

// 点击Modal外部区域时隐藏
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

// 显示Modal的函数
function openModal() {
  modal.style.display = "block";
}

使用Bootstrap实现Modal

引入Bootstrap库后直接使用预设组件

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

<!-- Modal结构 -->
<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>Modal内容</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

使用第三方库实现高级Modal

通过SweetAlert2库创建美观的Modal
安装库：npm install sweetalert2
基础用法示例：

import Swal from 'sweetalert2'

Swal.fire({
  title: '自定义Modal',
  html: '<p>支持HTML内容</p>',
  icon: 'info',
  confirmButtonText: '确定'
})

高级配置选项：

Swal.fire({
  title: '复杂Modal',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  input: 'text',
  inputPlaceholder: '请输入内容...'
}).then((result) => {
  if (result.isConfirmed) {
    console.log(result.value)
  }
})

实现可拖拽Modal

为原生Modal添加拖拽功能

const modalContent = document.querySelector('.modal-content');
let isDragging = false;
let offsetX, offsetY;

modalContent.addEventListener('mousedown', (e) => {
  isDragging = true;
  offsetX = e.clientX - modalContent.getBoundingClientRect().left;
  offsetY = e.clientY - modalContent.getBoundingClientRect().top;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  modalContent.style.left = `${e.clientX - offsetX}px`;
  modalContent.style.top = `${e.clientY - offsetY}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

需要添加CSS定位支持：

.modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}