当前位置：首页 > jquery

jquery对话框

2026-02-03 11:16:09jquery

jQuery对话框的实现方法

jQuery对话框通常通过插件实现，常见的有jQuery UI Dialog和第三方插件如SweetAlert。以下是两种主流方法的详细说明：

jQuery UI Dialog

引入必要资源后，通过简单代码即可创建对话框：

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<div id="dialog" title="基本对话框">
  <p>这是一个jQuery UI对话框示例</p>
</div>

<script>
$( "#dialog" ).dialog({
  autoOpen: true,
  modal: true,
  buttons: {
    "确定": function() { $(this).dialog("close"); },
    "取消": function() { $(this).dialog("close"); }
  }
});
</script>

SweetAlert对话框

对于更现代化的外观，可使用SweetAlert2：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
Swal.fire({
  title: '操作确认',
  text: "您确定要执行此操作吗？",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: '确定',
  cancelButtonText: '取消'
}).then((result) => {
  if (result.isConfirmed) {
    // 用户点击确定后的处理逻辑
  }
});
</script>

对话框自定义选项

两种方案都支持高度自定义：

jQuery UI Dialog支持设置宽度、高度、位置等参数：

$("#dialog").dialog({
  width: 500,
  height: 300,
  position: { my: "center", at: "center", of: window },
  closeOnEscape: false
});

SweetAlert2支持自定义图标和动画：

Swal.fire({
  title: '自定义弹窗',
  html: '<p>支持<b>HTML</b>内容</p>',
  icon: 'success',
  showClass: {
    popup: 'animate__animated animate__fadeInDown'
  },
  hideClass: {
    popup: 'animate__animated animate__fadeOutUp'
  }
});

动态内容对话框

创建带动态内容的对话框：

jquery对话框

// jQuery UI方式
$("<div>").html("动态加载的内容").dialog({
  title: "动态对话框"
});

// SweetAlert2方式
Swal.fire({
  title: '动态内容',
  html: $('#dynamic-content').html(),
  showCloseButton: true
});