仅更改 Bootbox 中特定模态的模态宽度答案

【问题标题】：Change modal width only for specific modal in Bootbox仅更改 Bootbox 中特定模态的模态宽度
【发布时间】：2014-08-10 09:48:16
【问题描述】：

我在 IE (IE 8 / IE 9) 上使用 Bootbox 4 和 Bootstrap 3，一切正常。

在 Bootstrap 3 中，您可以按如下方式在 CSS 中设置模态宽度，但是，这样的任何事情都会改变我所有的模态：

.modal-dialog {
    width:70% !important;
}

在 CSS、jQuery 或 Bootbox 设置中是否有一种方法可以仅针对一个特定模式更改 Bootbox 警报模式的宽度？ Bootbox 页面只有很短的文档，我在其他任何地方都找不到这方面的信息。

更新

创建特定模态的JS（带有示例数据）：

bootbox.dialog({
    message: " \
        <table class='table table-hover'> \
            <thead> \
                <tr> \
                    <th>Item Name</th> \
                    <th>Location</th> \
                    <th>Path</th> \
                    <th>Last Update</th> \
                </tr> \
            </thead> \
            <tbody> \
                <tr> \
                    <td>Item 1</td> \
                    <td>Navbar - Level 2</td> \
                    <td>Products - blabla</td> \
                    <td>Added by xxx on 05 Aug 2014</td> \
                </tr> \
            </tbody> \
        </table>",
    title: "Search Results",
    buttons: {
        main: {
            label: "Close",
            className: "btn-primary"
        }
    },
    className: "modal70"
});

还有我目前的 CSS：

.modal-dialog.modal70 {
    width:70% !important;
}

【问题讨论】：

标签： jquery css twitter-bootstrap bootbox

【解决方案1】：

试试这个：

.modal70 > .modal-dialog {
    width:70% !important;
}

更新：

Try Demo

【讨论】：

谢谢。我尝试将 class: "modal70" 添加到创建模态的 JS 中，这在此处没有任何区别。以下内容也不起作用：className：“modal70”。有什么想法吗？
请把你的html模态代码或创建模态的JS代码提供一个准确的解决方案。
谢谢 - 没有区别。我做了一些更多的研究，看起来问题出在使用标准 Bootstrap 模态类的父 div 上。 Bootstrap 确实在这里提供了不同的模态宽度类，所以我尝试将以下内容添加到我的 JS 中，但仍然没有任何变化，即使这看起来像更“官方”的方法：.find('div.modal-dialog').addClass('modal -lg')
抱歉，我在尝试您的最后一次更新时打错字了 - 这很好用！非常感谢你的帮助！只是想知道如果 Boostrap 已经获得了相应的课程，为什么他们没有办法做到这一点。 :)

【解决方案2】：

更多信息...

如文档所述，您可以使用构造函数中的“size”属性控制模态框的大小。

将相关的 Bootstrap 模态尺寸类添加到对话框包装器中。
有效值为“大”和“小”（默认值：null）

bootbox.dialog({
    size: <small|large>
});

查看片段以了解用法示例^{（全屏显示效果最佳）}

$(".size-by-funcion-0").click(function() {
    bootbox.dialog({
        size: "null",
        title: "Default Size Modal Example",
        message: "...",
    });
});

$(".size-by-funcion-1").click(function() {
    bootbox.dialog({
        size: "small",
        title: "Small Size Modal Example",
        message: "...",
    });
});

$(".size-by-funcion-2").click(function() {
    bootbox.dialog({
        size: "large",
        title: "Large Size Modal Example",
        message: "...",
    });
});

/*********************/
// or make it dynamic... with only one function
$(".dynamic-size").click(function() {
    bootbox.dialog({
        size: $(this).data('size'),
        title: "Dynamic Size Modal Example",
        message: "...",
    });
});

p {
    cursor: pointer;
    background-color: #ccc;
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://github.com/makeusabrew/bootbox/releases/download/v4.3.0/bootbox.min.js"></script>

<p class="size-by-funcion-0">Modal with the default size</p>
<p class="size-by-funcion-1">Modal with "size:small"</p>
<p class="size-by-funcion-2">Modal with "size:large"</p>

<hr />

<p class="dynamic-size" data-size="null">Modal with "size:default"</p>
<p class="dynamic-size" data-size="small">Modal with "size:small"</p>
<p class="dynamic-size" data-size="large">Modal with "size:large"</p>

更多信息来源：http://bootboxjs.com/documentation.html

注意：需要 Bootstrap 3.1.0 或更高版本。

【讨论】：

【解决方案3】：

如果 Moshtaf 的解决方案不起作用，请再加一行：

.modal70 > .modal-dialog {
    width:70% !important;
    max-width:70% !important;
}

这是因为 Bootbox 包含的 max-width 的默认值也可以覆盖宽度的定义。

【讨论】：