Sunday, May 28, 2017

Bootbox.JS : Create flexible Modal popups

Bootbox js is a javascript library which used to create bootstrap modal popups easily without writing repeatable HTML content.
It allows us to create model popup without writing any single line of HTML

The following types of modal popups are available in BootBox
1. bootbox.alert(message,callback)
2. bootbox.prompt(message,callback)
3. bootbox.confirm(message,callback)
4. bootbox.dialog(options)

Without Using BootBox :

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                      Hello world!
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">OK</button>
            </div> 
      </div>
   </div>
</div>

Using BootBox :
 

bootbox.alert("Hello world!")

We can create bootstrap modal popup with single line of code using BootBox js

Example 1: display modal popup with call back function

bootbox.alert({
    message: "This is an alert with a callback!",
    callback: function () {
    console.log('This was logged in the callback!');
 }})

Example 2: display modal popup with custom dialog

bootbox.dialog({
    title: 'A custom dialog ',
    message: '<p>This is sample custom dialog</p>',
    buttons:{
            Save:{
                label:’Save’,
                callback:function(){}
                     }
            Cancel:{
                label:’Cancel’,
                callback:function(){}
                         }
                   }
});

Please check wide range of examples at http://bootboxjs.com/examples.html
Please check complete documentation at http://bootboxjs.com/documentation.html

Happy Coding :)