造型引导箱确认对话框

Question

Bootbox 确认显示：

如何更改引导框确认对话框的样式？

$('#GoToLead').click(function (e) {
    var self = $(this);
    e.preventDefault();
    bootbox.confirm("Are you sure?", function (result) {
        if (result) {
            $('<input type="hidden" name="StartDate" />').val($('#StartDate').val()).appendTo('#theForm');
            $('<input type="hidden" name="EndDate" />').val($('#EndDate').val()).appendTo('#theForm');
            $('<input type="hidden" name="City" />').val($('#City').val()).appendTo('#theForm');
            $('<input type="hidden" name="AbbrName" />').val($('#AbbrName').val()).appendTo('#theForm');
            $('<input type="hidden" name="ZipCode" />').val($('#ZipCode').val()).appendTo('#theForm');
            $('<input type="hidden" name="FirstName" />').val($('#FirstName').val()).appendTo('#theForm');
            $('<input type="hidden" name="LastName" />').val($('#LastName').val()).appendTo('#theForm');
            $('<input type="hidden" name="EmailAddress" />').val($('#EmailAddress').val()).appendTo('#theForm');
            $('<input type="hidden" name="GroupNumber" />').val($('#GroupNumber').val()).appendTo('#theForm');
            self.unbind("click");
            self.get(0).click();
        }
    });

Answer 1

样式引导框确认对话框

我们可以使用预定义的 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);
    });
 });
 });

Answer 2

使用 className 选项应用 CSS 选择器，然后相应地设置样式。 Here's an example:

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;
}