Bootstrap和bootbox:动态更改确认窗口的宽度

Question

我正在使用Bootstrap作为Web应用程序,并使用bootbox(http://bootboxjs.com)显示一个窗口,然后再继续执行删除操作.

对于不同的删除选项,我需要显示不同的消息.我想显示不同宽度的确认窗口.

如何在javascript代码中动态执行此操作？我看了一切,无法找到解决方案.

感谢您的任何想法和建议!

干杯.

Answer 1

上面的答案都没有对我有用,所以我不知所措,直到下面做了我的预期(使用Bootbox.js v4.2.0)

Javascript:

bootbox.alert("Hello").find("div.modal-dialog").addClass("largeWidth");

CSS:

.largeWidth {
    margin: 0 auto;
    width: 90%;
}

Answer 2

可以使用'bootbox.classes'向bootbox窗口添加自定义类.我认为你应该制作一些标准的CSS类,如小型,中型,大型和CSS中的宽度.

然后在每个bootbox中使用如下所示的行(例如):

bootbox.classes.add('medium');

根据文档bootbox.classes是一个帮助方法,所以它应该工作.http://bootboxjs.com/documentation.html

它似乎从文档中删除,我不知道上面的方法是否仍然有效.

下面是另一个将您自己的类添加到对话框的实现(例如):

bootbox.dialog({

  message: "I am a custom dialog",
  animate: true,

  /**
   * @optional String
   * @default: null
   * an additional class to apply to the dialog wrapper
   */
  className: "medium"
  }
});

Answer 3

使用jQuery .AddClass链接到bootbox.confirm的末尾.我的实现看起来像......

$("a#ArchiveBtn").click(function () {
    bootbox.confirm("Archive Location? Cannot be undone", function (result) {
        if (result) {
            $("form#ArchiveForm").submit();
        }

    }).find("div.modal-content").addClass("confirmWidth");
});

CSS ...

/* BootBox Extension*/
.confirmWidth {
    width: 350px;
    margin: 0 auto;
}

Answer 4

只需在jquery'ing bootbox alert上添加以前的答案.

考虑你想使用单行而不是单独依赖css类的声明.就这样做,例如,

bootbox.alert("Customizing width and height.").find("div.modal-dialog").css({ "width": "100%", "height": "100%" });

Jquery的.css()诀窍让你可以摆脱它.addClass().