如何添加一個選項來調整bootbox警報的大小

Question

如何添加一個選項來調整bootbox.alert();的大小？

我正在使用Bootbox 4.3.0。

bootbox.alert("Success",function(){ 

}); 

以下是bootbox.js庫的鏈接。

Answer 1

您應該指定一個自定義類到您bootbox的戒備和改變對CSS的寬度：

的jQuery：

bootbox.alert({ 
     "message": "Success", 
     "className" : "my-custom-class", 
     "callback": function() { 
      console.log("Success callback"); 
     } 
    }); 

CSS：

.my-custom-class .modal-dialog{ 
    width:200px; 
} 

這將帶您bootbox提醒並縮小尺寸。

這是一個jsFiddle與您需要的修復程序。

如果你想所有的警報要小一些，只是改變了原有modal-dialog類：

.modal-dialog{ 
    width:200px; 
} 

Answer 2

您可以使用模式，LG，模態-MD或bootbox模式-SM，比如我創建一些選項的功能，看起來像這樣：

$.showModal = function(options){ 
 
    if(typeof options==="undefined" || options.length == 0) 
 
    console.log("No se definieron configuraciones, usando opciones por defecto"); 
 
    var settings = $.extend({ 
 
    title:"Modal sin título", 
 
    size:"modal-lg", 
 
    url:"", 
 
    modalClass:"Modal1", 
 
    data:{}, 
 
    classBtnDanger:"btn-default", 
 
    classBtnSuccess:"btn-primary", 
 
    lblSuccess: "Aceptar", 
 
    lblCancel: "Cancelar", 
 
    callbackOk:function(){ 
 
     console.log("Sin callback ok"); 
 
    }, 
 
    callbackCancel:function(){ 
 
     console.log("Sin callback cancel"); 
 
    } 
 
    },options); 
 
    if(settings.url.length == 0) 
 
    console.log("Se debe indicar una url"); 
 
    if(typeof bootbox === "undefined") 
 
    throw("Bootbox debe estar cargado"); 
 
    else{ 
 
    bootbox.dialog({ 
 
     title: settings.title, 
 
     className:settings.modalClass, 
 
     message: "Custom HTML Here", 
 
     buttons: { 
 
     danger: { 
 
      label: settings.lblCancel, 
 
      className: settings.classBtnDanger, 
 
      callback: settings.callbackCancel 
 
     }, 
 
     success: { 
 
      label: settings.lblSuccess, 
 
      className: settings.classBtnSuccess, 
 
      callback: settings.callbackOk 
 
     } 
 
     } 
 
    }); 
 
    $("."+settings.modalClass).find(".modal-dialog").addClass(settings.size); 
 
    } 
 
};

有模態大小的選項，這是類（modal-lg，modal-md，modal-sm） 有了這個，你不必修改原始的.modal對話框類。 這是行：$（「。」+ settings.modalClass）.find（「。modal-dialog」）。addClass（s​​ettings.size）;

希望它可以幫助你。