更改甜蜜警报2的Overlay背景颜色

Question

我最近将 sweet alert 1 移到了 sweet alert 2，但是根据文档，没有选项可以像 sweet alert 1 那样为警报框的叠加背景设置主题

.swal-overlay {
  background-color: rgba(43, 165, 137, 0.45);
}.

请问甜蜜警报2的叠加背景如何实现更改？

Answer 1

要实现这一点，您可以像这样使用 jQuery selectors 和 select 叠加元素。

<button type="button" onclick="opentheSwal();">OK</button>
<script>
    function opentheSwal() {
        swal(
            'Good job!',
            'You clicked the button!',
            'success'
        );
        $(".swal2-modal").css('background-color', '#000');//Optional changes the color of the sweetalert 
        $(".swal2-container.in").css('background-color', 'rgba(43, 165, 137, 0.45)');//changes the color of the overlay
    }
</script>

您将必须 select .swal2-container.in 更改叠加层并使用 jqueries .css() 函数应用 css。

祝你好运。

Answer 2

Swal.fire({
  icon: 'success',
  background: 'red',
})

Answer 3

我遇到了同样的问题，发现有必要将 !important 添加到 CSS:

.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
    background: rgba(0,0,0,.95)!important;
}

更改甜蜜警报2的Overlay背景颜色

Changing the Overlay background color of sweet alert 2

javascript

sweetalert2