Как закрыть диалоговое окно jquery при открытии окна предупреждения - PullRequest
Новая
       38

Как закрыть диалоговое окно jquery при открытии окна предупреждения

1 голос
/ 12 апреля 2020

У меня есть код 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);

Моя проблема здесь в том, что когда появляется диалоговое окно и при нажатии кнопки «ОК» в диалоговом окне я должен вызвать другую функцию, которая показывает alert.Но по какой-то причине, когда я нажимаю «ОК», диалоговое окно не закрывается, и появляется предупреждение. Может кто-нибудь помочь, как я могу закрыть диалоговое окно, и тогда появляется предупреждение?

Ответы [ 2 ]

1 голос
/ 12 апреля 2020

Вам нужно использовать .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);
0 голосов
/ 12 апреля 2020

Вы можете попробовать обновить событие щелчка следующим образом: 

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

DEMO: 

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