js模态框实现

2026-03-15 13:34:38JavaScript

使用原生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%;
  overflow: auto;
  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("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库

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

创建Bootstrap模态框结构

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  打开Bootstrap模态框
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>这里是Bootstrap模态框内容</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>

使用jQuery实现模态框

引入jQuery库

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

jQuery实现代码

$(document).ready(function(){
  $("#jqModalBtn").click(function(){
    $("#jqModal").fadeIn();
  });

  $(".jqClose").click(function(){
    $("#jqModal").fadeOut();
  });
});

对应的HTML结构

<button id="jqModalBtn">jQuery模态框</button>
<div id="jqModal" style="display:none;">
  <div class="jq-modal-content">
    <span class="jqClose">&times;</span>
    <p>jQuery实现的模态框内容</p>
  </div>
</div>

模态框高级功能实现

添加动画效果

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

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

实现可拖拽模态框

js模态框实现

let isDragging = false;
let offset = [0,0];
const modalContent = document.querySelector('.modal-content');

modalContent.addEventListener('mousedown', function(e) {
  isDragging = true;
  offset = [
    modalContent.offsetLeft - e.clientX,
    modalContent.offsetTop - e.clientY
  ];
});

document.addEventListener('mousemove', function(e) {
  if (isDragging) {
    modalContent.style.left = (e.clientX + offset[0]) + 'px';
    modalContent.style.top  = (e.clientY + offset[1]) + 'px';
  }
});

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