twitter-bootstrap Bootstrap 和 bootbox：动态改变确认窗口的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17414781/
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
Bootstrap and bootbox: dynamically change the width of confirmation window
提问by curious1
I am using Bootstrap for a web application and using bootbox (http://bootboxjs.com) for showing a window before proceeding with a delete operation.
我正在将 Bootstrap 用于 Web 应用程序，并在继续执行删除操作之前使用 bootbox ( http://bootboxjs.com) 显示一个窗口。
For different delete options, I need to display different messages. I would like to show confirmation windows with different widths.
对于不同的删除选项，我需要显示不同的消息。我想显示不同宽度的确认窗口。
How can I do this dynamically in javascript code? I looked at everything and am unable to find a solution.
如何在 javascript 代码中动态执行此操作？我查看了所有内容，但无法找到解决方案。
Thanks for any ideas and suggestions!
感谢您的任何想法和建议！
Cheers.
干杯。
回答by SirDorius
None of the answers above worked for me so I fiddled around until the following did what I expected (using Bootbox.js v4.2.0)
上面的答案都不适合我，所以我一直在摆弄，直到以下内容达到我的预期（使用Bootbox.js v4.2.0）
Javascript:
Javascript:
bootbox.alert("Hello").find("div.modal-dialog").addClass("largeWidth");
CSS:
CSS:
.largeWidth {
margin: 0 auto;
width: 90%;
}
回答by Nick N.
It is possible to add custom classes to bootbox windows with 'bootbox.classes'. I think you should make some standard CSS classes like small, medium, large and asign a width in CSS.
可以使用“bootbox.classes”将自定义类添加到引导箱窗口。我认为你应该制作一些标准的 CSS 类，比如小、中、大，并在 CSS 中指定宽度。
Then in every bootbox use a line like below (e.g.):
然后在每个引导箱中使用如下一行（例如）：
bootbox.classes.add('medium');
According to the the documentation bootbox.classes is a helper method, so it should work. http://bootboxjs.com/documentation.html
根据文档 bootbox.classes 是一个辅助方法，所以它应该可以工作。http://bootboxjs.com/documentation.html
It seems to be taken out of the documentation, I have no clue if above method still works.
它似乎从文档中取出，我不知道上述方法是否仍然有效。
Below is another implementation to add your own class to a dialog (e.g.):
下面是将您自己的类添加到对话框的另一个实现（例如）：
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"
}
});
回答by user3093178
Use jQuery .AddClass chained to the end of bootbox.confirm. My implementation looks like...
使用链接到 bootbox.confirm 末尾的 jQuery .AddClass。我的实现看起来像......
$("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...
CSS...
/* BootBox Extension*/
.confirmWidth {
width: 350px;
margin: 0 auto;
}
回答by rdonatoiop
Just adding to previous answers on jquery'ing bootbox alert.
只是在 jquery'ing bootbox alert 上添加到以前的答案。
Consider you would like to use a one-liner rather than relying on a declaration of a css class separately. Just do, for example,
考虑到您想使用单行而不是单独依赖 css 类的声明。只是做，例如，
bootbox.alert("Customizing width and height.").find("div.modal-dialog").css({ "width": "100%", "height": "100%" });
Jquery's .css()does the trick so you can get rid of .addClass().
Jquery.css()可以解决这个问题，因此您可以摆脱.addClass().
回答by Michael Grassman
When setting up your box give it a seperate css class
设置您的盒子时，给它一个单独的 css 类
<style>
.class-with-width { width: 150px !important; }
</style>
<script>
bootbox.dialog("I am a custom dialog", [{
"label" : "Success!",
"class" : "class-with-width",
"callback": function() {
Example.show("great success");
}
}]);
<script>
回答by A1rPun
You can use the sizeproperty. It adds the relevant Bootstrap modal size class to the dialog wrapper. Valid values are 'large' and 'small'
您可以使用该size物业。它将相关的 Bootstrap 模态大小类添加到对话框包装器。有效值为“大”和“小”
bootbox.setDefaults({ size: 'small' });
Or you can use the classNameproperty. It's an additional class to apply to the dialog wrapper.
或者您可以使用该className属性。它是应用于对话框包装器的附加类。
bootbox.setDefaults({ className: 'w-100' });
Css
css
// Example class (a bootstrap v4 utility class)
.w-100 {
width: 100%;
}
I use setDefaultsin these examples but these properties can be used on any bootbox dialog, you will override the defaults this way.
我setDefaults在这些示例中使用了这些属性，但这些属性可用于任何引导框对话框，您将通过这种方式覆盖默认值。
bootbox.alert({ message: 'But without me how can you have mass?', className: 'w-100' })
To preserve the defaults you can chain a jQuery call or even access the actual DOM ;).
要保留默认值，您可以链接 jQuery 调用，甚至访问实际的 DOM ;)。
bootbox.alert('Whoops!').addClass('w-100');
bootbox.alert('Sorry!')[0].classList.add('w-100');
bootbox.classesisn't supported in versions >4.4.0
bootbox.classes版本不支持 >4.4.0
回答by vess
To resize the whole dialog, please, use "div.modal-dialog" instead of "div.modal-content":
要调整整个对话框的大小，请使用“div.modal-dialog”而不是“div.modal-content”：
.find("div.modal-dialog").addClass("confirmWidth");
The css used is simply e.g.:
使用的 css 只是例如：
.confirmWidth {
width:350px;
}
回答by Om Shankar
Use this- size:"small"or size:"large"
使用这个-size:"small"或size:"large"
