Jquery UI Dialog - 如何使用关闭按钮执行功能？答案

【问题标题】：Jquery UI Dialog - How to use the close button to perform function?Jquery UI Dialog - 如何使用关闭按钮执行功能？
【发布时间】：2017-01-31 13:15:50
【问题描述】：

我在我的站点中使用 Jquery UI 对话框，想知道是否可以使用关闭按钮执行操作。例如，如果按下按钮，则刷新页面。像这样的东西。这可能吗？

谢谢各位。 :)

$(document).ready(function() {
  $("#dialog1").dialog({
    autoOpen: false,
    show: {
      effect: "puff",
      duration: 300
    },
    hide: {
      effect: "clip",
      duration: 500
    }
  });

  $("#opener").on("click", function() {
    $("#dialog1").dialog("open");
  });

});


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

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog1" title="Dialog Title!">
  <p>Dialog Text</p>
</div>
<button onclick="dialog()">Press For Dialog</button>

【问题讨论】：

标签： jquery dialog alert

【解决方案1】：

您可以像这样使用jquery ui对话框的事件dialogbeforeclose：

事件处理的javascript部分：

$("#dialog1").on("dialogbeforeclose", function() {
    alert("Do what you want here");
});

如果需要，您可以调用 location.reload(); 来刷新页面，而不是发出警报

工作sn-p：

$(document).ready(function() {
  $("#dialog1").dialog({
    autoOpen: false,
    show: {
      effect: "puff",
      duration: 300
    },
    hide: {
      effect: "clip",
      duration: 500
    }
  });

  $("#opener").on("click", function() {
    $("#dialog1").dialog("open");
  });

});


// Here is the interception of the event dialogbeforeclose
$("#dialog1").on("dialogbeforeclose", function() {
    alert("Do what you want here");
});

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

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog1" title="Dialog Title!">
  <p>Dialog Text</p>
</div>
<button onclick="dialog()">Press For Dialog</button>

【讨论】：

谢谢，正是我想要的！

【解决方案2】：

$('#dialog1').on('dialogclose', function(event) {
     location.reload();
 });

【讨论】：