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);

我的问题是，当对话框出现并且单击对话框的“确定”时，我必须调用另一个显示警报的函数。但是由于某些原因，当我单击“确定”时，对话框却没有。 t关闭并显示警报。有人可以帮我关闭对话框，然后显示警报吗？

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">

如何在打开警报框时关闭jquery对话框

2 个答案: