Стилизация диалогового окна подтверждения загрузки

Используйте параметр className, чтобы применить селектор CSS, а затем настройте соответствующий стиль. Вот пример:

bootbox.alert({
    message: "This is an alert with an additional class!",
    className: 'bb-alternate-modal'
});

с:

.modal.bb-alternate-modal .modal-content {
    background: #555 none repeat scroll 0 0;
    color: #fff;
}

Стили диалогового окна подтверждения загрузки

мы можем настроить bootbox, используя предопределенное className. Мы также можем включить проверку формы в виде модального окна. перейдите по этим ссылкам, чтобы узнать больше о bootbox:

http://formvalidation.io/examples/bootbox/

http://bootboxjs.com/v3.x/examples.html

Помимо них вы также можете изучить эти коды

$(document).ready(function()
{

var Example = (function() {
"use strict";

var elem,
    hideHandler,
    that = {};

that.init = function(options) {
    elem = $(options.selector);
};

that.show = function(text) {
    clearTimeout(hideHandler);

    $("#result").html(text);
    $("#result").fadeIn();

    hideHandler = setTimeout(function() {
        that.hide();
    }, 4000);
};

that.hide = function() {
    $("#result").fadeOut();
};

return that;
}());




$('.alert').on('click',function()
{
    bootbox.alert("Hello world!", function() {
    Example.show("Hello world callback");
});
    /*bootbox.alert(
            {
                title:"ashish bansal", //title which will be displayed on promt
                message:"<h2>Are you Agree?</h2>",//message on promt
                size:'large', //size of popup,default value is null and valid values are small and large only
                className: 'bb-alternate-modal',//css class to implement transformation effect 
                onEscape:true,//allow escape button to dismiss promt
                backdrop:true,// click on background dismiss alert
                callback:function()
                {
                    console.info("callback called successfully!");
                }
            });*/
});
$('.alert1').on('click',function()
{
    bootbox.confirm(
    {
            title:"bansal",
            message:"Are you Agree?",
            size:'large',
            buttons:
            {
                confirm:
                {
                    className:'btn-success',
                    label: '<i class="fa fa-check"></i> YES'
                },
                cancel:
                {
                    className:'btn-danger',
                    label: '<i class="fa fa-times"></i> NO'
                }
            },
            callback:function(result)
            {
                console.info("confirm promt called successfully with result:"+result);
            },
            //closeButton:false// hide close button
            //animate:false // by default it is true.used to animte alert in out style
    });
 });
 $('.alert2').on('click',function()
{
    bootbox.prompt(
    {
            title:"Select your favourite items",
            message:"Welcome to world of promt messages",
            size:'large',
            inputType:'checkbox',
            inputOptions:[{
                text:'Shoes',
                value:'1'
            },
            {
                text:'Bike',
                value:'2'
            },
            {
                text:'Rose',
                value:'3'
            }],
            inputType:'email',
            inputType:'number',
            inputType:'select',
            inputOptions:[{
                text:'Shoes',
                value:'1'
            },
            {
                text:'Bike',onEscape:true,//allow escape button to dismiss promt
                backdrop:true,// click on background dismiss alert
                value:'2'
            },
            {
                text:'Rose',
                value:'3'
            }],
            //inputType:'date',
            callback:function(result)
            {
                Example.show("confirm promt called successfully with result:"+result);
            }
    });
 }); 
 $('.alert3').on('click',function()
 {
     bootbox.dialog(
     { 
        message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
        onEscape:true,//allow escape button to dismiss promt
        backdrop:true// click on background dismiss alert
     }); 
 });
 $('.alert4').on('click',function()
 {
     var dialog = bootbox.dialog(
     {
        title: 'A custom dialog with init',
        message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>',
        onEscape:true,//allow escape button to dismiss promt
        backdrop:true// click on background dismiss alert
     });
    dialog.init(function()
    {
        setTimeout(function()
        {
            dialog.find('.bootbox-body').html('I was loaded after the dialog was shown!');
        }, 3000);
    });
 });
 });