Sposób zamykania bootboxa przy użyciu niestandardowego okna dialogowego

Question

Używam bootbox do wyświetlania okna dialogowego.

Jeśli używam bootbox.confirm, bootbox.alert lub bootbox.prompt, po naciśnięciu escape klawisza lub kliknięcie na zewnątrz okna, okno zamknięte zgodnie z oczekiwaniami

ale podczas korzystania bootbox.dialog, gdy klikam na zewnątrz okna lub naciskając escape klucz, okna nie zamyka się, jak sprawić, by zachowywał się tak, jak robi to inny dialog?

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

To powinno wystarczyć. Uwaga: test ten został przetestowany tylko na v3. przy użyciu bootstrap 2.3.2

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

Answer 2

Szczerze mówiąc nigdy naprawdę używane modalne - to pochodzi od PR dawno, dawno temu, ale nigdy nie byłem przekonany o swoim przypadku użycia. Teraz nie jest to dla ciebie dobre, ale metoda jest faktycznie komentowana jako przestarzała w wersji 3.0.0 i prawdopodobnie zostanie usunięta w przyszłych wersjach - po prostu nie pasuje (dla mnie) do czego stworzono Bootbox i jak inne metody zostały ulepszony i przetestowany, został nieco zaniedbany.

Ale można zrobić coś takiego

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

Answer 3

Dodaj funkcję onEscape zwrotnej, która może mieć puste ciało.

Zobacz docs and example.

kod podstawowy:

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

Answer 4

W wersji 3, z okna, zasłona jest prawdziwe tylko wtedy, gdy pracuje onEscape jest prawdą, jak również - więc wystarczy ustawić zarówno prawdziwe, np

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>