在 Bootbox 窗口中更改 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15246320/
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 css in a Bootbox window
提问by kambi
How can I add styling (let's say bold attribute) to the "Hello world" in this code:
如何在此代码中向“Hello world”添加样式（假设为粗体属性）：
bootbox.alert("Hello world!", function() {
Example.show("Hello world callback");
});
Thank you
谢谢
采纳答案by James King
The best thing to do is to inspect the popup with firebug and you can see the HTML that makes up the modal window, so you can write css for it. Looking at the example on their website, here is the html that makes up a basic example:
最好的办法是使用 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>
So if you wanted to change the footer colour:
因此，如果您想更改页脚颜色：
.modal-footer {background:#c00;}
回答by Mark B
Expanding on James King's answer:
扩展詹姆斯金的回答：
using firebug's console you can see that the response to the command:
使用 firebug 的控制台，您可以看到对命令的响应：
bootbox.alert('hello world')
is a reference to the bootbox containing div element; Object[div.bootbox]
是对包含 div 元素的 bootbox 的引用； Object[div.bootbox]
So it's very easy to totally redefine the alert when you call it by simply changing its css attributes:
因此，当您通过简单地更改其 css 属性来调用它时，很容易完全重新定义警报：
bootbox.alert('Danger!!' ).find('.modal-content').css({'background-color': '#f99', 'font-weight' : 'bold', color: '#F00', 'font-size': '2em', 'font-weight' : 'bold'} );
回答by steph643
Let's sum up:
我们总结一下：
For styling text
用于样式文本
Add directly the html to your string:
将 html 直接添加到您的字符串中：
bootbox.alert("<b>Hello world!<b>"); // (thanks BenM)
bootbox.alert("<div class='label'>Hello world!</div>"); // (thanks Adriano)
For styling built-in bootbox elements
用于设置内置引导箱元素的样式
Use the returning jQuery object to change classes, css, etc.:
使用返回的 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");
回答by Toping
You can create a 0 opacity empty div:
您可以创建一个 0 不透明度的空 div：
<div id="msgbox"></div>
then you can simple use a opacity change on js:
那么您可以简单地在 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); });
and you can freely style the msgbox, with position, colors or even using some transition
并且您可以使用位置、颜色甚至使用一些过渡来自由设置 msgbox 的样式
#msgbox { color: #CC0000; font-weight: bold; text-align: center; transition: all 1s linear; -webkit-transition: all 1s linear; }
回答by Jamie Hutber
Asumming Example.show();is putting this code somewhere on the page, wrapping the element with strong will work:
AsummingExample.show();将此代码放在页面上的某个位置，用 strong 包装元素将起作用：
bootbox.alert("Hello world!", function() {
Example.show("<strong>Hello world</strong> callback");
});
