jQuery UI 对话框 close() 方法(1)

📌 相关文章

📜 jQuery UI 对话框 close() 方法(1)

📅 最后修改于: 2023-12-03 15:16:45.532000 🧑 作者: Mango

jQuery UI 对话框 close() 方法

简介

close() 是 jQuery UI 对话框（dialog）的实例方法，用于关闭当前打开的对话框。

语法

$(selector).dialog("close");

参数

无参数。

返回值

无返回值。

示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 对话框 close() 方法示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(function() {
    $("#dialog").dialog({
      autoOpen: false
    });

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

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

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

<div id="dialog" title="对话框标题">
  <p>对话框内容</p>
</div>

</body>
</html>

在这个示例中，当点击“打开对话框”按钮时，会打开一个对话框，当点击“关闭对话框”按钮时，会关闭当前打开的对话框。

注意点

在使用 close() 方法关闭对话框时，如果对话框使用了 beforeClose 事件，该事件会在关闭对话框前被触发，在该事件中可以取消对话框的关闭。使用 close() 方法时，该事件的 ui 参数为 {interaction: true}。如果需要在关闭对话框时触发 beforeClose 事件中的逻辑，并且不想使用 close() 方法，可以使用 $(selector).dialog("option", "hide") 方法来关闭对话框，该方法会触发 beforeClose 事件。