在Bootbox窗口中更改css

Question

如何在此代码中的"Hello world"中添加样式(比如粗体属性):

bootbox.alert("Hello world!", function() {
   Example.show("Hello world callback");
});

谢谢

Answer 1

扩展James King的答案:

使用firebug的控制台,您可以看到对命令的响应:

bootbox.alert('hello world')

是对包含div元素的bootbox的引用; Object[div.bootbox]

因此,当您通过简单地更改其css属性来调用警报时,完全重新定义警报非常容易:

bootbox.alert('Danger!!' ).find('.modal-content').css({'background-color': '#f99', 'font-weight' : 'bold', color: '#F00', 'font-size': '2em', 'font-weight' : 'bold'} );

Answer 2

我们总结一下:

用于样式文本

直接将html添加到您的字符串:

bootbox.alert("<b>Hello world!<b>"); // (thanks BenM)
bootbox.alert("<div class='label'>Hello world!</div>"); // (thanks Adriano)

用于样式化内置的bootbox元素

使用返回的jQuery对象来更改类,css等:

var box = bootbox.alert("Hello world!");
box.find('.modal-content').css({'background-color': '#f99'}); // (thanks Mark B)
box.find(".btn-primary").removeClass("btn-primary").addClass("btn-danger");

Answer 3

最好的办法是使用 firebug 检查弹出窗口，您可以看到构成模式窗口的 HTML，因此您可以为其编写 css。查看他们网站上的示例，下面是构成基本示例的 html：

<div style="overflow: hidden;" tabindex="-1" class="bootbox modal fade in" aria-hidden="false">
<div class="modal-body">Hello world!</div>
<div class="modal-footer"><a href="javascript:;" class="btn btn-primary" data-handler="0">OK</a></div>
</div>

因此，如果您想更改页脚颜色：

.modal-footer {background:#c00;}