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:


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:

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

Leave a Reply