Cách đóng hộp khởi động khi sử dụng hộp thoại tùy chỉnh

Question

Tôi đang sử dụng bootbox để hiển thị hộp thoại.

Nếu tôi sử dụng bootbox.confirm, bootbox.alert hoặc bootbox.prompt, khi nhấn escape chìa khóa hoặc nhấp bên ngoài hộp thoại, hộp thoại đóng lại như mong đợi

nhưng khi sử dụng bootbox.dialog, khi tôi nhấp vào bên ngoài hộp thoại hoặc nhấn escape chìa khóa, hộp thoại không đóng, làm thế nào để làm cho nó hoạt động như hộp thoại khác làm gì?

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

này nên làm điều đó. Xin lưu ý rằng điều này chỉ được thử nghiệm trên v3. sử dụng bootstrap 2.3.2

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

Answer 2

Thành thật mà nói, tôi chưa bao giờ thực sự sử dụng phương thức - nó đến từ PR một thời gian dài trước đây nhưng tôi chưa bao giờ bị thuyết phục về trường hợp sử dụng của nó. Không tốt cho bạn bây giờ nhưng phương pháp này thực sự được nhận xét là không được dùng trong v3.0.0 và có thể sẽ bị xóa trong các phiên bản sau - nó không thực sự phù hợp (với tôi) Bootbox đã được tạo ra như thế nào và tinh chỉnh, cải thiện và thử nghiệm nó ngồi ở đó phần nào bị bỏ quên.

Nhưng bạn có thể làm điều gì đó như thế này

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

Answer 3

Thêm chức năng gọi lại onEscape, có thể có một phần trống.

Xem docs and example.

mã cơ bản:

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

Answer 4

Trong phiên bản 3, với hộp thoại, bối cảnh là đúng chỉ hoạt động khi onEscape cũng đúng - vì vậy bạn chỉ cần đặt cả là true, ví dụ

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>