10

如何在此代码中向“Hello world”添加样式(比如说粗体属性):

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

谢谢

4

5 回答 5

18

扩展詹姆斯金的回答:

使用 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'} );
于 2014-01-31T14:22:13.427 回答
12

让我们总结一下:

用于样式文本

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

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

用于样式化内置引导箱元素

使用返回的 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");
于 2014-04-27T16:53:25.437 回答
4

最好的办法是使用 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;}
于 2013-03-06T13:19:25.827 回答
2

您可以创建一个不透明度为 0 的空 div:

<div id="msgbox"></div>

然后你可以简单地在 js 上使用不透明度更改:

 bootbox.alert(x, function() { 
document.getElementById('msgbox').innerHTML = x; document.getElementById('msgbox').style.opacity= '1'; setTimeout(function(){ document.getElementById('msgbox').style.opacity = '0'; }, 2000);  });

你可以自由地设置 msgbox 的样式,使用位置、颜色,甚至使用一些过渡

#msgbox { color: #CC0000; font-weight: bold; text-align: center; transition: all 1s linear; -webkit-transition: all 1s linear; }
于 2013-03-06T13:45:21.370 回答
-1

假设Example.show();将此代码放在页面上的某个位置,用 strong 包装元素将起作用:

 bootbox.alert("Hello world!", function() {
   Example.show("<strong>Hello world</strong> callback");
 });
于 2013-03-06T11:39:06.360 回答