Bootstrap Modals Made Even Easier

Anyone who has used Bootstrap would have probably used modals. A modal is a window that “pops up” as a result of some kind of event on the page. Modals are great for CRUD operations where you want to edit a record in a grid or even to provide some form of response to the page. The source code to instantiate a modal is fairly self-explanatory but it is wordy. Well, I came across this library which makes implementing Bootstrap modals crazily easy.

To implement a minimalist Bootstrap modal, we usually have to create the following source code.

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

The class and elements are self-explanatory, but there is a lot of code there. This is where BootstrapDialog comes into it’s own.

Have a look at some of the examples and you will see what I mean. At it’s simplest, we can replace the code above with this.

<script>
	BootstrapDialog.alert('One fine body...');
</script>

How easy is that? Not only that, but BootstrapDialog gives a lot of functionality from rich dialog content to callback functions. While these things are very possible with a default Bootstrap modal implementation, BootstrapDialog requires much less code to get the same result.

Til next time …


28 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *