How to Customize Bootbox.js Prompt Options

Posted on by By Nikhilesh, in Business Intelligence, Front End, Javascript | 0

There is bootbox.dialog if we want to customize bootbox modal. The only change that goes is to change the message string. In bootbox.dialog, the message doesn’t have to be plain text. It can be HTML too. And hence it can go like this:

Make data easy with Helical Insight.
Helical Insight is the world’s best open source business intelligence tool.


bootbox.dialog ({
    message: "Your message",
    title: "Your title",
    buttons: {
        main / confirm / cancel / success: {
            label: "some label",
            className: "btn-primary / btn-danger / btn-success",
            callback: function(){
                /* your callback code goes here */
            }
        }
    }
})

In the above method, we have just modifies bootbox message with element and don’t forgert class name. Now, if you want to customize prompt without using bootbox.dialog then this is the way to do it.


bootbox.prompt({
    title: "Your custom title",
    placeholder: "helper text",
    className: "someClassName" /* class name to the prompt*/
    buttons: {
        confirm: {
            className: "btn-primary",
            label: "Some label to button",
            callback: function() {
                /* your callback code goes here*/
            }
        },
        cancel: {
            className: "btn-danger",
            label: "Some label to button",
            callback: function() {
                /* your callback code goes here*/
            }
        }
    }
})

That’s it. You are done. The advantages here is, you can even add class names to the prompt by mentioning above that may come handy when dealing with ajax calls and some other functionalities. You can even add other classNames with the buttons. It is same as you add id’s or class names to button and do something with it. Like:

Make data easy with Helical Insight.
Helical Insight is the world’s best open source business intelligence tool.

className: "btn-primary someClassName"

Even though you haven’t customized element in prompt, adding placeholder to prompt will display the helper text.

-By
Uma Maheswar
Helical It Solution

logo

Best Open Source Business Intelligence Software Helical Insight is Here

logo

A Business Intelligence Framework

0 0 votes
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments