Bootbox.js

Bootstrap modals made easy.

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing, or removing any of the required DOM elements or JavaScript event handlers.

npm i bootbox • cdnjs

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!");

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">&times;</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.bs.modal", function() {      // wire up the OK button to dismiss the modal when shown
        $("#myModal .modal-footer .btn").on("click", function(e) {
            console.log("button pressed");              // just as an example...
            $("#myModal").modal('hide');                // dismiss the dialog
        });
    });
        
    $("#myModal").on("hide.bs.modal", function() {      // remove the event listeners when the dialog is dismissed
        $("#myModal a.btn").off("click");
    });
            
    $("#myModal").on("hidden.bs.modal", 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>

Build Your Own Dialogs!

Each Bootbox function calls a fourth public function, dialog(), which you can use to create your own custom dialogs. See the Documentation page for usage and to learn which options are available for each function.

Ready To Get Started?

Head on over to the Getting Started page, where you'll find the information you need to start using Bootbox, including the versions of Bootstrap we support and options for adding Bootbox to your project.