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 …