CODEWITHSUNDEEP
javascriptsweetalert2
Eshiett Oto-obong
Eshiett Oto-obong

Reputation: 418

Changing the Overlay background color of sweet alert 2

I have recently moved sweet alert 1 to sweet alert 2, but based on the documentation there is no option for theming the overlay background of an alert box like sweet alert 1

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

Please how can I achieve changing the overlay background of sweet alert 2?

Upvotes: 4

Views: 36810

Answers (3)

Esquirish
Esquirish

Reputation: 195

I had this same issue, and found it was necessary to add !importantto the CSS:

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

Upvotes: 2

Khalil Ibrahim
Khalil Ibrahim

Reputation: 71

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

Upvotes: 6

Hayden Passmore
Hayden Passmore

Reputation: 1155

To achieve this you can just use jQuery selectors and select the overlay element like so.

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

You will have to select the .swal2-container.in to change the overlay and apply the css using jqueries .css() function.

Good Luck.

Upvotes: 3

Related Questions