如何在打開警報框時關閉 jquery 對話框

Question

我在下面有一個 javascript 代碼：

var alertText = "Hey.";
       $("div").remove("#confirmationDialogBox");
       $(document.body).append("<div id='confirmationDialogBox'></div>");
       $("#confirmationDialogBox").html('');
       $("#confirmationDialogBox").dialog({
           resizable: false,
           height: 140,
           title: 'Alert !!',
           modal: true,
           draggable: false,
           zIndex: 99999,
           buttons: [{
               "class": 'btnModalDisplay',
               text: "Ok",
               click: function () {
                   //Calls another function that shows an alert
               }}]
       }).text(alertText);

我的問題是，當對話框出現並且對話框的“確定”的 onclick 時，我必須調用另一個顯示警報的 function。但是由於某種原因，當我單擊“確定”時，對話框不會關閉並且警報出現。 有人可以幫助我如何關閉對話框然后出現警報嗎？

Answer 1

您需要使用.dialog("close") ，如下所示：

var alertText = "Hey.";
$("div").remove("#confirmationDialogBox");
$(document.body).append("<div id='confirmationDialogBox'></div>");
$("#confirmationDialogBox").html('');
$("#confirmationDialogBox").dialog({
   resizable: false,
   height: 140,
   title: 'Alert !!',
   modal: true,
   draggable: false,
   zIndex: 99999,
   buttons: [{
     "class": 'btnModalDisplay',
     text: "Ok",
     click: function () {
       // Calls another function that shows an alert
       $( this ).dialog( "close" ); // add this line to close dialog
     }
   }]
}).text(alertText);

Answer 2

您可以嘗試像這樣更新點擊事件：

$("#confirmationDialogBox").dialog({
  ...
  buttons: [{
    "class": 'btnModalDisplay',
    text: "Ok",
    click: function(e) {
      //Calls another function that shows an alert
      e.preventDefault();
      $('#confirmationDialogBox').dialog('close');
    }
  }]
});

演示：

 var alertText = "Hey."; $("div").remove("#confirmationDialogBox"); $(document.body).append("<div id='confirmationDialogBox'></div>"); $("#confirmationDialogBox").html(''); $("#confirmationDialogBox").dialog({ resizable: false, height: 140, title: 'Alert,:', modal: true, draggable: false, zIndex: 99999: buttons, [{ "class": 'btnModalDisplay', text: "Ok". click; function(e) { //Calls another function that shows an alert e.preventDefault(); $('#confirmationDialogBox').dialog('close'); } }] }).text(alertText);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet">