At present for an interactive web interface Bootstrap is
widely used. One of the problem faced during the designing of web interface is
when it comes for dialog boxes which in deed is used to display alerts,
confirmations or message prompts.
Most of the people what they do is, they simply use the
dialog boxes present in default which doesn’t look much interactive. It can
also be a drawback in your interactive web UI that you have designed compared
with the dialog boxes.
So as a solution to this Bootstrap Modals can be used, but
certain people might wonder that, to include modals certain amount of code
lines need to be included which in return will increase the complexity of the
code and will also take a certain amount of time to code that part. Not only that,
if you are to include multiple dialog boxes with displaying different details,
will have to include the code segment appropriately wherever you want to
display the dialog boxes.
To get over all these problems, you can use Bootbox.js, a small javascript library
which allows you to create programmatic dialog boxes without having to worry
about creating, managing or removing any of the required DOM elements or JS
event handlers.
It is so simple to use this javascript library. All what you
got to do is click the below link and include the downloaded file and set the
relevant path in HTML to use the functionalities Bootbox.js have provided with.
The library exposes three core methods designed to imitate
their native javascript equivalents. Their exact method signatures are flexible
as each can take various parameters to customize labels and specify defaults.
Three core methods,
- bootbox.alert(message, callback)
- bootbox.prompt(message, callback)
- bootbox.confirm(message, callback)
Each of these three methods calls a fourth public method
which too can use to create your own custom dialogs
- bootbox.dialog(options)
Alert
Confirm
Prompt
Custom Dialog
Example
Lets select alert method and see how it can be used.
Default
This is the simplest usage of Bootbox, requiring only the
text of the message you wish to show.
bootbox.alert(“Your message
here…”)
Default, with
callback
If you need to have code execute only upon dismissal of the
dialog, you should supply a callback function.
bootbox.alert(“Your message
here…”, function() {
/* your
callback code */
})
Alert options
Alerts can be customized using certain option.
bootbox.alert({
size:
‘small’,
message:
“Your message here…”,
callback:
function() {
/*
your callback code */
}
})
