Как закрыть окно загрузки при использовании настраиваемого диалогового окна

Question

Я использую bootbox для отображения диалогового окна.

Если я использую bootbox.confirm, bootbox.alert или bootbox.prompt, при нажатии escape клавиши или щелчок вне диалога, диалог закрыт, как и ожидалось

, но при использовании bootbox.dialog, когда я нажимаю за пределами диалога или нажав escape клавишу, диалоговое окно не закрывается, как заставить его вести себя, как это делает другой диалог?

var box = bootbox.dialog({ 
    show: false, 
    backdrop: true, 
    animate: false, 
    title: 'Bla', 
    message: 'bla bla bla', 
    buttons: { 
     cancel: { 
      label: 'Cancel', 
      className: 'btn-warning' 
     }, 
     save: { 
      label: 'Parse', 
      className: 'btn-success', 
      callback: function() { 
       // handling with ajax 
       return false; 
      } 
     } 
    } 
}); 
box.modal('show'); 

Answer 1

Это должно сделать это. Обратите внимание, что это было проверено только на v3. с помощью начальной загрузки 2.3.2

$(document).on('click', '.modal-backdrop', function (event) { 
    bootbox.hideAll() 
}); 

Answer 2

Чтобы быть честным, я никогда не использовал модальность - он пришел из PR долгое, долгое время назад, но я никогда не был убежден в его использовании. Теперь вам нехорошо, но метод фактически прокомментирован как устаревший в версии 3.0 и, вероятно, фактически будет удален в будущих версиях - он просто не подходит (для меня), для чего был создан Bootbox, а также как другие методы измененный, улучшенный и проверенный, что он сидел там, несколько пренебрегали.

Но вы можете сделать что-то вроде этого

$(document).keyup(function(e) { 
    if (e.keyCode == 27) {box.modal("hide");} // esc 
}); 

Answer 3

Добавить функцию обратного вызова onEscape, которая может иметь пустое тело.

См. docs and example.

Базовый код:

bootbox.dialog({ 
    onEscape: function() {}, 
    // ... 
}); 

Answer 4

В версии 3, с диалогами, фон является истинным работает только тогда, когда onEscape верно, а - так что вам просто нужно установить как истинно, например,

bootbox.dialog({message:'Message', title:'Title', backdrop:true, onEscape:true})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>