当前位置：首页 > jquery

jquery 弹出框

2026-01-16 14:08:40jquery

jQuery 弹出框实现方法

jQuery 弹出框可以通过插件或自定义代码实现，以下是几种常见方法：

使用 jQuery UI Dialog

jQuery UI 提供了 Dialog 组件，适合创建模态或非模态弹出框。

<!-- 引入 jQuery 和 jQuery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- HTML 结构 -->
<div id="dialog" title="基本对话框">
  <p>这是一个 jQuery UI 对话框</p>
</div>

<button id="open-dialog">打开对话框</button>

<!-- JavaScript 代码 -->
<script>
$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "确定": function() {
        $(this).dialog("close");
      }
    }
  });

  $("#open-dialog").click(function() {
    $("#dialog").dialog("open");
  });
});
</script>

使用 Bootstrap Modal

如果项目已使用 Bootstrap，可以结合 jQuery 调用模态框。

<!-- 引入 Bootstrap 和 jQuery -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- 按钮触发模态框 -->
<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>

自定义简单弹出框

对于简单需求，可以不依赖插件直接实现。

<style>
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
}
.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

<div class="popup-overlay">
  <div class="popup-content">
    <h3>自定义弹出框</h3>
    <p>这是一个简单的自定义弹出框</p>
    <button class="close-popup">关闭</button>
  </div>
</div>

<button class="open-popup">打开弹出框</button>

<script>
$(document).ready(function(){
  $(".open-popup").click(function(){
    $(".popup-overlay").fadeIn();
  });

  $(".close-popup").click(function(){
    $(".popup-overlay").fadeOut();
  });
});
</script>

使用第三方插件

常见 jQuery 弹出框插件包括：

SweetAlert2：美观的替代原生 alert
Magnific Popup：响应式弹窗插件
FancyBox：多媒体弹窗解决方案

以 SweetAlert2 为例：

jquery 弹出框

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<button id="show-alert">显示弹窗</button>

<script>
$("#show-alert").click(function(){
  Swal.fire({
    title: '提示',
    text: '这是一个 SweetAlert 弹窗',
    icon: 'info',
    confirmButtonText: '确定'
  });
});
</script>

选择方法时应考虑项目需求，jQuery UI Dialog 适合复杂交互，Bootstrap Modal 适合 Bootstrap 项目，自定义实现适合简单需求，第三方插件能提供更丰富的视觉效果。