Bootbox.js – easy Bootstrap modal dialogs

Alert, confirm and flexible modal dialogs for the Bootstrap framework. Bootbox.js – TB modals made easy.

A good solution for Bootstrap modal dialogs

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.

Bootbox.js overlay
Bootbox.js overlay

The simplest example:

bootbox.alert("Hello world!", function() {
  console.log("Callback");
  // your handlers here
});

But probably you would like to display something more than simple “Hello” – some HTML content. We can easy load it from an element, e.g. div. Let’s assume we have some hidden div elements with content, and we want to load it dynamically.

HTML:

<div id="popup_foo">
  <p> Lorem ipsum </p>
  more content...
</div>

<div id="popup_bar">
  ...
</div>

JS:

myLoader('foo');

myLoader = function(div_id) {
  var item = "#popup_" + div_id;
  var data = $(item).html();

  bootbox.alert(data, function() {
    // console.log(div_id);
    alert('Callback - submit');
  });
};

To change the label, simply put it as the second argument:

  bootbox.alert(data, "My label", function() { ... 

How to close Bootbox programmatically?

It’s very simple:

$('.bootbox.modal').modal('hide');

That’s it.

You can also code simple handler to close your Bootbox dialog, e.g.:

$(document).keyup(function(e) {
  if (e.keyCode === 27) {
    $('.bootbox.modal').modal('hide');
  }
});

Bootbox can more! There are also Confirms, Prompts and custom dialogs available.

Dialog

If you need more options and flexibility, instead of simple Alert, try the Dialog with customized buttons

...

bootbox.dialog(data, [{
  "label" : "Cancel",
  "class" : "btn-default",
  "callback": function() {
    $('.bootbox.modal').modal('hide');
  }
  }, {
    "label" : "Save",
    "class" : "btn-success",
    "callback": function() {
      alert("Do something...");
    }
  }
]);
};

More information, details and docs you will find on the project website.

Get Bootstrap modal dialogs

http://bootboxjs.com

Enjoy!

Share:Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1