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

这与手动引导程序模式没有什么不同，因为您的目标不是.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'
        });
    });