如何添加选项来调整引导盒警报的大小

How can I add an option to resize a bootbox alert

本文关键字：调整 何添加 添加 选项      更新时间：2023-09-26

如何添加调整bootbox.alert();大小的选项？

我正在使用引导盒 4.3.0。

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

这是引导盒.js库的链接。

您应该为引导盒警报分配一个自定义类，并在 CSS 上更改其宽度：

j查询：

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

.CSS：

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

这将接收您的引导盒警报并缩小其大小。

这是一个带有您需要修复的 jsFiddle。

如果希望所有警报都更小，只需更改原始modal-dialog类：

.modal-dialog{
    width:200px;
}

您可以在bootbox中使用modal-lg，modal-md或modal-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-dialog 类。这是行： $（"."+settings.modalClass）.find（".modal-dialog"）.addClass（settings.size）;

希望对您有所帮助。

相关文章：