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">×</button>
Hello world!
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(){}
}
}
});
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)
<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">×</button>
Hello world!
</div>
<div class="modal-footer">
<div class="modal-footer">
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
Using BootBox :
</div>
</div>
Using BootBox :
bootbox.alert("Hello world!")
We can create bootstrap modal popup with single line of code using BootBox js
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 :)
No comments:
Post a Comment