在 Bootbox 窗口中更改 CSS

Question

我该如何在这段代码中为“Hello world”添加样式（比如加粗属性）：

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

谢谢

- kambi

---

将其包装在<b>标签内会产生什么效果？ - BenM

你不能为警告框添加样式。但是，example.show函数是做什么的？它是否在某个地方添加了标记？ - Jamie Hutber

@BenM 它确实可以工作，但我需要设置字体大小和更多属性，并且我希望以一种优雅的方式完成这个任务。 - kambi

@JamieHutber 你可以忽略 Example.show()，谢谢。 - kambi

将其包装在具有正确类的 div 中（这样您就不必将所有这些东西都放在字符串中传递...）：bootbox.alert("<div class='label'>你好，世界！</div>"); - Adriano Repetti

@kambi 我知道这是一个老问题...但是你是如何让你的show()函数工作的呢？我无法让我的工作（假设这是在警报框消失后出现的蓝色框）...你能帮忙吗？ - pattyd

Answer 1

在James King的回答基础上进行扩展：

使用Firebug控制台，您可以看到对以下命令的响应：

bootbox.alert('hello world')

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

因此，当您调用它时，通过简单地更改其CSS属性，可以非常容易地完全重新定义alert：

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

- Mark B

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");

- steph643

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;}

- James King

Answer 4

您可以创建一个透明度为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; }

- Toping

Answer 5

假设Example.show();将代码放置在页面的某个位置，使用包装元素将起作用：

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

- Jamie Hutber

---

不是我干的，但我会尝试解释；Example.show()是回调函数的一部分，因此它只在警报被显示和关闭后才被调用。在那里添加标记只对回调函数（无论它做什么）有影响，不会影响警报显示的标记。 - blurfus