当前位置：首页 > jquery

jquery 模态框

2026-02-03 13:46:29jquery

jQuery 模态框的实现方法

jQuery 模态框通常用于在页面上显示一个弹出窗口，覆盖其他内容并强制用户与之交互。以下是几种常见的实现方式：

使用 jQuery UI Dialog

jQuery UI 提供了一个 Dialog 组件，可以轻松创建模态框：

// 引入 jQuery UI 库后
$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "确定": function() {
        $(this).dialog("close");
      }
    }
  });

  $("#open-dialog").click(function() {
    $("#dialog").dialog("open");
  });
});

对应的 HTML 结构：

jquery 模态框

<button id="open-dialog">打开模态框</button>
<div id="dialog" title="基本对话框">
  <p>这是一个模态对话框示例</p>
</div>

使用 Bootstrap Modal

Bootstrap 的模态框组件可以与 jQuery 配合使用：

// 显示模态框
$('#myModal').modal('show');

// 隐藏模态框
$('#myModal').modal('hide');

// 事件监听
$('#myModal').on('shown.bs.modal', function() {
  // 模态框显示后执行
});

对应的 HTML 结构：

jquery 模态框

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

<div class="modal fade" id="myModal" 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>

自定义 jQuery 模态框

如果需要完全自定义实现，可以使用以下方法：

// 创建模态框
function showModal(content) {
  // 创建遮罩层
  var overlay = $('<div class="modal-overlay"></div>');

  // 创建模态框容器
  var modal = $('<div class="modal-container"></div>')
    .append('<div class="modal-content">' + content + '</div>')
    .append('<button class="modal-close">×</button>');

  // 添加到body
  $('body').append(overlay).append(modal);

  // 点击关闭
  $('.modal-close, .modal-overlay').click(function() {
    overlay.remove();
    modal.remove();
  });
}

// 使用示例
$('#custom-modal-btn').click(function() {
  showModal('<h3>自定义模态框</h3><p>这是完全自定义的内容</p>');
});

对应的 CSS 样式：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}

.modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  z-index: 1001;
  border-radius: 5px;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}