twitter-bootstrap 仅为 Bootbox 中的特定模态更改模态宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25227407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change modal width only for specific modal in Bootbox
提问by user2571510
I am using Bootbox 4 with Bootstrap 3 on IE (IE 8 / IE 9) and everything works as intended.
我在 IE (IE 8 / IE 9) 上使用 Bootbox 4 和 Bootstrap 3，一切都按预期工作。
It looks like in Bootstrap 3 you can set the modal width in CSS as follows, however, anything like this would then change all my modals:
看起来在 Bootstrap 3 中你可以在 CSS 中设置模态宽度，如下所示，但是，这样的任何事情都会改变我所有的模态：
.modal-dialog {
width:70% !important;
}
Is there a way in CSS, jQuery or the Bootbox settings that I can change the width of a Bootbox alert modal only for one specific modal? The Bootbox page only has a very short documentation and I couldn't find information on this anywhere else.
有没有办法在 CSS、jQuery 或 Bootbox 设置中只为一个特定的模式更改 Bootbox 警报模式的宽度？Bootbox 页面只有一个非常简短的文档，我在其他任何地方都找不到相关信息。
Update
更新
JS that creates the specific modal (with sample data):
创建特定模态的 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"
});
And my current CSS:
和我目前的 CSS：
.modal-dialog.modal70 {
width:70% !important;
}
回答by gmo
Just as further information...
正如进一步的信息...
As the documentation says, you can control the size of the modal with the "size" property in the constructor.
正如文档所说，您可以使用构造函数中的“size”属性控制模态的大小。
Adds the relevant Bootstrap modal size class to the dialog wrapper.
Valid values are 'large' and 'small' (Default: null)
将相关的 Bootstrap 模态大小类添加到对话框包装器。
有效值为“大”和“小”（默认值：null）
bootbox.dialog({
size: <small|large>
});
See Snippet for usage example (best seen in full screen)
有关用法示例，请参阅 Snippet （最好在全屏模式下查看）
$(".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>More info on source: http://bootboxjs.com/documentation.html
有关源的更多信息：http: //bootboxjs.com/documentation.html
Note: Requires Bootstrap 3.1.0 or newer.
注意：需要 Bootstrap 3.1.0 或更新版本。
回答by Gregorio
If the solution from Moshtaf doesn't work, complete it with one more line:
如果 Moshtaf 的解决方案不起作用，请再添加一行：
.modal70 > .modal-dialog {
width:70% !important;
max-width:70% !important;
}
This is because Bootbox includes too a default value for max-width that can overwrite the definition for width.
这是因为 Bootbox 也包含了 max-width 的默认值，它可以覆盖宽度的定义。
