BootboxJS

Bootstrap modals made easy.

Compatible with Bootstrap 3 and 4

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 JS event handlers.

Here’s the simplest possible 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">&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", 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>

Bootbox exposes three functions designed to mimic their native JavaScript equivalents1. Their exact function signatures are flexible, as each can take various parameters to customise labels and specify defaults, but they are most commonly called like so:

bootbox.alert(message, callback);

bootbox.confirm(message, callback)

bootbox.prompt(message, callback)

Each of these three functions calls a fourth public function, dialog, which you can use to create your own custom dialogs:

bootbox.dialog(options)

Documentation is available for each of these functions, including the options available for each dialog. You can also find examples for using each of these functions in the (appropriately named) Examples page.

Visit the Getting Started page for guidance on how to add Bootbox to your project.

Please note:

There are some caveats to using Bootbox dialogs in place of native dialogs. Please see the Known Limitations section in the Documentation page to learn more.

Bootbox was originally created in 2011 with the sole purpose of wrapping JavaScript's low-level dialog functions with Bootstrap's high level modal functionality. As such it is a small library focused on providing basic programmatic dialogs with minimal fuss and overhead.

Bootbox is authored and maintained by Nick Payne (@makeusabrew). Thanks are also due to the contributors!

Bootbox is a free, open source project. As such, you can help out in a number of ways, from simply raising an issue to forking the project and submitting a pull request.

I'm particularly keen to improve the examples and the API docs, so pull requests contributing towards the gh-pages branch (which you're looking at!) are extremely welcome.

Lastly — please just help spread the word!