Search code examples
cssbootbox

Need to differentiate bootbox.alert() and bootbox.confirm() ,both styles of modal in same page


I have multiple bootbox.alert() and bootbox.confirm() modals in same page need to clearly add different styles but no luck so far, how can I define my own style classes for these modals.

var alertModal = bootbox.alert(
                {
                    title: "<i class='fa fa-exclamation-circle' style='font-size: 20px; color: white'></i> Alert",
                    message: "Please select Patient from Queue",
                })
            alertModal.find('.modal-header')
                .css(
                {
                    'background-color': 'red',
                    'color': 'white'
                }
                );
            alertModal.find('.modal-footer')
                .css({
                    'background-color': 'green',
                    'color': 'white'
                }
                );

Solution

  • In the documentation link Dialog Options, you can see that, an option for optional className is given.

    var alertModal = bootbox.alert(
    {
        title: "<i class='fa fa-exclamation-circle' style='font-size: 20px; color: white'></i> Alert",
        message: "Please select Patient from Queue",
        className:"your custom class name here"
    })
    

    You can create separate classes for alert and confirm and pass it in the options