如何在 JavaScript 中更改 Bootstrap 弹出框的颜色答案

【问题标题】：How to change the color of a Bootstrap popover in JavaScript如何在 JavaScript 中更改 Bootstrap 弹出框的颜色
【发布时间】：2013-07-16 18:05:43
【问题描述】：

我有这个 JS 代码来弹出一个弹出窗口：

$('a').popover({content: 'Popover text', title: 'Popover'});
$('a').popover('show');

我想更改属性，例如，我希望弹出框的颜色为浅黄色。有没有办法可以在 JS 代码本身中做到这一点？也许在模板选项中？

【问题讨论】：

你试过$('a').popover().css("param", "value");吗？
什么是参数/值对？我试过$('a').popover().css(".popover-title", "background:#ffff99"); 和$('a').popover().css("popoverBackground", "#FFFFE0"); 没有运气。（PS，我是一个彻头彻尾的新手）
我的意思是这样的：$('a').popover().css("background-color", "#ffff99");。看看这个文档：api.jquery.com/css
这会改变元素的颜色（在我的例子中是一个按钮）而不是弹出框本身
You can change the default template of the popover:

标签： javascript jquery twitter-bootstrap

【解决方案1】：

您可以通过 CSS 使用 .popover、.popover-title 和 .popover-content 类来做到这一点。

.popover-title{
    background: #ffff99;
}

【讨论】：

啊哈，我搞定了。 .popover-header{ background: #ffff99; } .popover-content{ background: #ffff99; } 谢谢！
唯一的问题是这会影响所有的弹出框。我怎样才能为特定的弹出框完成同样的事情？
给弹出框的父容器另一个类：.popover-container>.popover-title{background: #ffff99;}
@Korra 您还可以在元素上放置一个类或使用生成弹出框的元素类型，如下所示：a ~ .popover{background: #ffff99; 或 a ~ .popover > .popover-title{background: #ffff99;
应该是背景：#ffff99 !important;

【解决方案2】：

正如其他人指出的，改变popover颜色的方法是改变.popover和.popover.right .arrow:after的CSS。但由于我们希望这动态发生，我们会这样做：

$('.popover').css('background-color', 'red');
$('.popover.right .arrow:after').css('border-right-color', 'red');

但是等等，第二个 jQuery sn-p 不正确。 你不能有 :after 选择器，因为 :after 不是 DOM 的一部分，因此这个世界上没有 javascript 能够赶上:after。所以我做了这个 CSS。

.popover-danger {
    background-color: #d9534f;
    border-color: #d43f3a;
    color: white;
}

.popover-danger.right .arrow:after {
    border-right-color: #d9534f;
}

每当我需要更改弹出框的颜色时，我都会编写以下 jQuery sn-p：

$('#selector').next('.popover').addClass('popover-danger');

#selector 是您应用了弹出框的元素。从那个元素我搜索下一个.popover。这确保我们只处理附加到当前元素的弹出框。然后我们简单的添加类，这样:after选择器就可以不用JS自然应用了。

JSFIDDLE DEMO.

【讨论】：

这是最好的选择，在 bootstrap 中为每个上下文类创建不同的 popover 类
哦，使用这些颜色： div.popover-danger { background-color: #f2dede;边框颜色：#dca7a7；颜色：#a94442； }
还要注意箭头，因为每个方向都有自己的类

【解决方案3】：

尝试使用此代码更改 Popover 标题栏和完整 Popover 的背景颜色：

$('.popover-title').css("background-color", "#9FC53B");
$('.popover').css("background-color", "red");

【讨论】：

【解决方案4】：

javascript：

$('#username').popover({
  title: '',
  content: 'error!'
  });
$('#username').popover('show');
$('.popover').addClass('popover-danger');

html:

<div id="username" class="input-group" data-html="true" data-placement="right">
  <span class="input-group-addon width-100 align-right">Username=</span>
  <input type="text" class="form-control" title="username" placeholder="Enter username..." v-model='username'/>
</div>

css:

.popover-danger {
    background-color: red !important;
    border-color: red !important;
    color: white !important;
}

【讨论】：