So schränken Sie das Schließen-Symbol des Bootbox-Modals ein, um das Modal zu schließen, um den Löschvorgang abzubrechen.

Question

Ich habe die Bootbox für Alert implementiert. Ich stehe vor zwei Problemen, die ich nicht lösen könnte. Wenn ich auf eine Schaltfläche klicke, wird eine Bootbox-Bestätigung mit zwei Schaltflächen 'Ja' und 'Nein' geöffnet. Aber wenn ich auf die Schließen-Schaltfläche in der oberen rechten Ecke klicke, denke ich, dass diese Box geschlossen werden soll, stattdessen wird die Abbrechen-Schaltfläche ausgelöst. Ein anderes Problem ist, wenn man auf 'Esc' klickt, wird auch der Schließen-Knopf gedrückt. Kann jemand mir sagen, wie man dieses Problem beschränkt.

$(function() { 
 
    $('.alert').on('click', function() { 
 
    bootbox.confirm({ 
 
     message: "This is a confirm with custom button text and color! Do you like it?", 
 
     buttons: { 
 
     confirm: { 
 
      label: 'Yes', 
 
      className: 'btn btn-primary' 
 
     }, 
 
     cancel: { 
 
      label: 'No', 
 
      className: 'btn btn-default' 
 
     } 
 
     }, 
 
     callback: function(result) { 
 
     if (result == true) { 
 
      bootbox.prompt({ 
 
      title: "This is a prompt with a set of checkbox inputs!", 
 
      className: 'box 2', 
 
      callback: function(result) { 
 
       console.log(result); 
 
      } 
 
      }); 
 

 
     } else if (result == false) { 
 
      alert('you have clicked No Button'); 
 
     } else { 
 
      alert("There is some Error"); 
 
     } 
 
     console.log('This was logged in the callback: ' + result); 
 
     } 
 
    }); 
 
    }) 
 
})

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script> 
 

 
<p>Content here. <a class="alert" href=#>Alert!</a></p>

Answer 1

<script> 
$(function() { 
    $('.alert').on('click', function() { 

     var onSubmit = function() { 
      //Process form data 
      alert("Submit"); 
      dialog.modal('hide'); 
     } 

     var onCancel = function() 
     { 
      bootbox.dialog({ 
       message: '<input class="form-control input-sm" id="inputsm" type="text">', 
       title: "Custom label", 
       onEscape: true, 
       buttons: { 
        main: { 
         label: "Save", 
         className: "btn-primary", 
         callback: function() { 
          console.log("Save"); 
         } 
        } 
       } 
      }) 
     } 

     var dialog = bootbox.dialog({ 
      message: "Perform this task?", 
      onEscape: true, 
      buttons: { 
       cancel: { 
        label: 'No', 
        className: 'btn-default', 
        callback: onCancel 
       }, 
       confirm: { 
        label: 'Yes', 
        className: 'btn-primary', 
        callback: onSubmit // Handles OK button 
       } 
      } 
     }); 

    }) 
}) 

</script>