如何在JavaScript中更改引导弹出窗口的颜色

How to change the color of a Bootstrap popover in JavaScript

本文关键字：窗口 颜色 JavaScript      更新时间：2023-09-26

我有这个JS代码来打开一个popover:

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

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

您可以使用.popover、.popover-title和.popover-content类使用CSS来完成此操作。

.popover-title{
    background: #ffff99;
}

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

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

但是等等，第二个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;
}

每当我需要更改popover的颜色时，我都会编写以下jQuery片段：

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

#selector是应用popover的元素。从该元素中，我搜索下一个.popover。这确保了我们只处理附加到当前元素的popover。然后我们简单地添加类，这样:after选择器就可以在没有JS的情况下自然应用。

JSFIDDLE演示。

尝试此代码更改Popover标题栏的背景色和完整的Popover:

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

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

自Bootstrap 5.2以来，可以使用CSS变量自定义popover。

new bootstrap.Popover(document.querySelector('[data-bs-toggle=popover]'));
// initialize
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<style>
.my-popover {
  --bs-popover-bg: lightyellow;
}
</style>
<button class="btn btn-primary" 
  data-bs-toggle="popover" data-bs-custom-class="my-popover"
  data-bs-content="This is the popover content.">
   Click for Popover
</button>

相关文章：