Question

我有一个深色的主题，可以更改整个页面的背景颜色。但是，这不会更改我拥有的弹出框的背景颜色。

我想知道是否有人有任何想法？我遇到的问题是我更改了弹出框的CSS，但每次打开弹出框时都不会更新。

我已经尝试过将CSS本身更改为Tomato，并且确实可以正确初始化，所以我知道可以更改弹出窗口。

这是darktheme和popover的CSS：

.dark-theme {
            color: #e1e1e1;
            background-color: #333333;
            transition: all 0.25s ease-out;
        }
.popover {
            background-color: tomato;
        }

这是Darktheme运行的脚本

function IsDarkTheme()
{
       darkThemeEnabled = document.body.classList.toggle('dark-theme');
       localStorage.setItem('darkThemeEnabled', darkThemeEnabled);
       $("popover").css({"background-color": "#333333"});
}

这是创建弹出窗口的jQuery

$('#RESET').ready(function () {
    $('[data-toggle="popover"]').popover({
        placement: 'top',
        html: true,
        title: 'Are you sure? <a href="#" class="close" data-dismiss="alert">&times;</a>',
        content: '<button id="RESETCON" onclick="RESET()" type="button" class="btn btn-danger w-100">Yes, I want to reset everything!</button>'
    });
    $(document).on("click", ".popover .close", function () {
        $(this).parents(".popover").popover('hide');
    });
});

编辑：Here is it currently live。

编辑2：我发现弹出框的确会更改颜色IF，并且只有在单击以更改为深色主题时，该弹出框才会打开。我不知道如何更改所有弹窗的颜色，即使它们没有显示，创建或尚未显示。

Answer 1

此行不正确：

$("popover").css({"background-color": "#333333"});

您正在选择<popover>元素，这些元素可能在您的文档中不存在。尝试使用类选择器：

$(".popover").css({"background-color": "#333333"});

Answer 2

我刚刚创建了一个Codepen https://codepen.io/anon/pen/Jqyvxa

这将解决您的问题，因为弹出式窗口是隐藏的，因此无法注册更改的CSS，窍门是在更改CSS之前先切换弹出式窗口，然后将其隐藏。

//init popover
$('[data-toggle="popover"]').popover();

//on checkbox change
$('#ChangeTheme').change(function() {
  //if checked
  if(this.checked) {
    console.log("Theme changed dark");

    $('[data-toggle="popover"]').popover('show');

    $(".popover").css("background", "black");

    $('[data-toggle="popover"]').popover('hide');
  }
  //if not checked
  else {
    console.log("Theme changed white");

    $('[data-toggle="popover"]').popover('show');

    $(".popover").css("background", "white");

    $('[data-toggle="popover"]').popover('hide');
  }
});

或者您可以先检查弹出窗口显示的事件，然后再检查显示的事件，请检查该复选框是否已选中，然后相应地更改背景

//init popover
$('[data-toggle="popover"]').popover();

//popover shown event
$('[data-toggle="popover"]').on('shown.bs.popover', function () {
  console.log("Popover show event")

  if($("#ChangeTheme").is(":checked")) {
    console.log("Theme changed dark");
    $(".popover").css("background", "black");
  }
  else
  {
    console.log("Theme changed white");
    $(".popover").css("background", "white");
  }
})

请注意，由于显示的弹出窗口的背景发生了变化，因此如果弹出窗口已经打开，则在切换复选框时不会改变背景。

Bootstrap 4 Popover CSS不会动态更改

2 个答案: