Bootbox.js 将其大小设为自定义值会使对话偏离中心

Question

我们正在为 Bootstrap 3 使用流行的 Bootbox 对话。我们想使用如下代码使其成为自定义尺寸：

 bootbox.dialog({
        message: $("<div>").load(href, function () {
        }),  //load
        backdrop: true,
        onEscape: false,
        size:'small'
    }).find(".modal-content").css("max-width", "360px");

但是，如果我们这样做，对话就会偏离中心。有什么办法可以实现吗？

非常感谢

Answer 1

这与手动 Bootstrap 模式没有任何不同，因为您不以 .modal-content 为目标。对话框的宽度（应该）由 .modal-dialog 定义，因此您有两个选择；

1) 更新您的目标，如下所示：

bootbox.dialog({
    message: $("<div>").load(href, function () {
    }),  //load
    backdrop: true,
    onEscape: false,
    size:'small'
}).find(".modal-dialog").css("max-width", "360px");

2) 使用 className 选项，并将您的规则移动到样式表中：

bootbox.dialog({
    message: $("<div>").load(href, function () {
    }),  //load
    backdrop: true,
    onEscape: false,
    className:'custom-small'
});

/* your CSS */
.custom-small .modal-dialog {
    max-width: 360px;
}

className 值应用于 .modal 容器，因此您需要后代选择器（如图所示）才能正确应用宽度。

Demo jsFiddle

除非你能保证响应超快，否则你可能还想修改加载对话框消息的方式，因为 $.load（或任何其他 AJAX 函数）是异步的：

$.get(href)
    .done(function (response) {
        bootbox.dialog({
            message: response,
            backdrop: true,
            onEscape: false,
            className:'custom-small'
        });
    });

Bootbox.js 将其大小设为自定义值会使对话偏离中心

Bootbox.js making its size a custom value throws dialogue off-center

bootbox