Wie Bootbox zu schließen, wenn benutzerdefinierte Dialogfeld verwenden

Question

Ich verwende bootbox, um Dialog anzuzeigen.

Wenn ich bootbox.confirm verwenden, bootbox.alert oder bootbox.prompt, wenn escape Taste oder außerhalb des Dialogs klicken schloß der Dialog als

erwartet

aber wenn bootbox.dialog verwendet, wenn ich außerhalb des Dialogs klicken oder escape-Taste drücken, um das Dialog schließt nicht, wie man es verhält, wie anderer Dialog tut?

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

etwas tun, es tun sollte. Bitte beachten Sie, dass dies nur auf v3 getestet wurde. mit Bootstrap 2.3.2

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

Answer 2

Um ehrlich zu sein, ich habe wirklich modal nie benutzt - es kam von einem PR vor langer, langer Zeit, aber ich habe noch nie von seinem Anwendungsfall überzeugt. Nicht gut für Sie, aber die Methode wird in Version 3.0.0 als veraltet gewertet und wird wahrscheinlich in zukünftigen Versionen entfernt werden - es passt einfach nicht zu mir (für mich), wofür Bootbox erstellt wurde und wie es andere Methoden waren gezwickt, verbessert und getestet es ist da etwas vernachlässigt.

Aber Sie können wie diese Dieses

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

Answer 3

schreiben onEscape Callback-Funktion, die einen leeren Körper haben kann.

Siehe docs and example.

Basic-Code:

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

Answer 4

In der Version 3, mit Dialog, Kulisse wahr zu sein funktioniert nur, wenn onEscape wahr ist auch - Sie müssen nur beide auf true gesetzt, z.B.

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>