jQuery UI对话框-如何使用关闭按钮执行功能？

Question

I'm using the Jquery UI Dialog in my site and wanted to know if there is a way that I can use the close button to perform an action. For example if the button is pressed then refresh the page. Something like this. Is this possible?

Thanks guys. :)

 $(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> 

Answer 1

You can use the event dialogbeforeclose of jquery ui dialog like this:

javascript part of the event handling:

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

You can, if you want, instead of the alert, refresh the page with calling location.reload();

Working snippet:

 $(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> 

Answer 2

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