Bootbox.js – Bootstrap modals made easy. UI design of alert, confirm and flexible dialogs for twitter’s bootstrap framework

0
246

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:

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,
Web Editor

LEAVE A REPLY

Please enter your comment!
Please enter your name here

three × three =