jQuery 如何在 JavaScript 中更改 Bootstrap 弹出框的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17683874/
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
How to change the color of a Bootstrap popover in JavaScript
提问by Korra
I have this JS code to bring up a popover:
我有这个 JS 代码来弹出一个弹出窗口：
$('a').popover({content: 'Popover text', title: 'Popover'});
$('a').popover('show');
I would like to change the attributes, for example, I would like the color of the popover to be a light yellow. Is there a way I can do this in the JS code itself? Perhaps in the template option?
我想更改属性，例如，我希望弹出框的颜色为浅黄色。有没有办法在 JS 代码中做到这一点？也许在模板选项中？
回答by Joe
You can do this with CSS by using the .popover, .popover-title, and .popover-contentclasses.
您可以通过使用CSS做到这一点.popover，.popover-title和.popover-content类。
.popover-title{
background: #ffff99;
}
回答by Rash
As others have pointed out, the way to change the popover color is to change the CSS of .popoverand .popover.right .arrow:after. But since we want this to happen dynamically, we would do:
正如其他人所指出的那样，改变酥料饼的颜色的办法是改变的CSS.popover和.popover.right .arrow:after。但由于我们希望这动态发生，我们会这样做：
$('.popover').css('background-color', 'red');
$('.popover.right .arrow:after').css('border-right-color', 'red');
But wait, the second jQuery snippet is not right.You cannot have :afterselector because :afteris NOT a part of DOM, hence no javascript in this world will be able to catch :after. So I made this CSS.
但是等等，第二个 jQuery 片段是不正确的。你不能有: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;
}
And whenever I need to change the color of my popover, I write the following jQuery snippet:
每当我需要更改弹出框的颜色时，我都会编写以下 jQuery 代码段：
$('#selector').next('.popover').addClass('popover-danger');
The #selectoris the element on which you have applied the popover. From that element I search the next .popover. This ensures that we are dealing with the popover attached to the current element only. Then we simply add the class so that the :afterselector can be applied naturally without JS.
该#selector是你已经应用了酥料饼的元素。从那个元素我搜索下一个.popover. 这确保我们只处理附加到当前元素的弹出窗口。然后我们只需添加类，这样:after选择器就可以在没有 JS 的情况下自然应用。
回答by dizad87
javascript:
javascript:
$('#username').popover({
title: '',
content: 'error!'
});
$('#username').popover('show');
$('.popover').addClass('popover-danger');
html:
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:
css：
.popover-danger {
background-color: red !important;
border-color: red !important;
color: white !important;
}
回答by Vijay Siva
Try this code to change background color of the Popover title bar and the full Popover:
试试这个代码来改变 Popover 标题栏和完整 Popover 的背景颜色：
$('.popover-title').css("background-color", "#9FC53B");
$('.popover').css("background-color", "red");
