Flexible Bootstrap-style dialogs

Bootbox provides three functions, alert , confirm , and prompt , whose aim is to mimic their native JavaScript equivalents. Here’s the simplest possible example: bootbox.alert( "Hello world!" ); Run example

Compare that to the code you’d have to write without Bootbox:

<!-- set up the modal to start hidden and fade in and out --> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <!-- dialog body --> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal">×</button> Hello world! </div> <!-- dialog buttons --> <div class="modal-footer"><button type="button" class="btn btn-primary">OK</button></div> </div> </div> </div> <!-- sometime later, probably inside your on load event callback --> <script> $("#myModal").on("show", function() { // wire up the OK button to dismiss the modal when shown $("#myModal a.btn").on("click", function(e) { console.log("button pressed"); // just as an example... $("#myModal").modal('hide'); // dismiss the dialog }); }); $("#myModal").on("hide", function() { // remove the event listeners when the dialog is dismissed $("#myModal a.btn").off("click"); }); $("#myModal").on("hidden", function() { // remove the actual elements from the DOM when fully hidden $("#myModal").remove(); }); $("#myModal").modal({ // wire up the actual modal functionality and show the dialog "backdrop" : "static", "keyboard" : true, "show" : true // ensure the modal is shown immediately }); </script>