Bootbox.js – Bootstrap modals made easy. UI design of alert, confirm and flexible dialogs for twitter’s bootstrap framework
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:
bootbox.alert(“Hello world!”);
The library exposes three methods designed to mimic their native JavaScript equivalents. Their exact method 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.prompt(message, callback)
- bootbox.confirm(message, callback)
The only required argument for alert calls is message; callback is required for confirm and prompt calls in order to determine what the user’s response was. Even when calling alert a callback is useful to determine when the user dismissed the dialog since our wrapper methods can’t & don’t block like their native counterparts: they are asynchronous rather than synchronous.
Each of these three methods calls a fourth public method which you too can use to create your own custom dialogs:
- bootbox.dialog(options)
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=“utf-8“> | |
| <title>My page</title> | |
| <!– CSS dependencies –> | |
| <link rel=“stylesheet“ type=“text/css“ href=“bootstrap.min.css“> | |
| </head> | |
| <body> | |
| <p>Content here. <a class=“alert“ href=#>Alert!</a></p> | |
| <!– JS dependencies –> | |
| <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js“></script> | |
| <script src=“bootstrap.min.js“></script> | |
| <!– bootbox code –> | |
| <script src=“bootbox.min.js“></script> | |
| <script> | |
| $(document).on(“click“, “.alert“, function(e) { | |
| bootbox.alert(“Hello world!“, function() { | |
| console.log(“Alert Callback“); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Website: https://github.com/makeusabrew/bootbox
Demo: http://bootboxjs.com/examples.html
Thanks for reading,
Nabeel Shahid.
Recent Comments