造型bootbox确认对话框

Question

Bootbox确认显示：

如何更改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选项来应用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; 
} 

Answer 2

造型bootbox使用预定义的className确认对话框

我们可以自定义bootbox。我们还可以以模态的形式包含表单验证。 请按照以下链接学习更多关于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); 
    }); 
}); 
});