Adding class to sweet alert

Question

I am trying to add an extra class for my modal so I can select it from LESS and turn it's background to transparent. But customClass is not working. Is there any other way to do it. BTW I have already changed a lot with default classes so I need to do this for just one modal, can not effect the global swal.

   swal({
      title: success,
      showConfirmButton: false,
      html: true,
      customClass: ".swal-back"
   });

https://sweetalert.js.org/docs/#classname - share some code of what you've tried, this is the additional property you need to add a new class. — Squiggs., Feb 26 '18 at 10:14
Are you using SweetAlert https://sweetalert.js.org or SweetAlert2 https://sweetalert2.github.io ? — Limon Monte, Feb 26 '18 at 13:20
for sweetalert2 version 11.7.18, you can use mixin. https://sweetalert2.github.io/ — dhanyn10, Jul 16 '23 at 16:00

score 17 · Answer 1 · edited Mar 22 '21 at 05:23

Assuming the OP is using SweetAlert2,

The customClass has since changed from a string to an object.

It expects an object such as the following:

customClass: {
  container: 'your-container-class',
  popup: 'your-popup-class',
  header: 'your-header-class',
  title: 'your-title-class',
  closeButton: 'your-close-button-class',
  icon: 'your-icon-class',
  image: 'your-image-class',
  content: 'your-content-class',
  input: 'your-input-class',
  actions: 'your-actions-class',
  confirmButton: 'your-confirm-button-class',
  cancelButton: 'your-cancel-button-class',
  footer: 'your-footer-class'
}

The official line in docs at time of writing here

On another note, be careful when using versions prior to 8.12.2 and close to it since there was a known bug there related to custom classes.

Issue related to the topic here

This is the correct answer when we use [SweatAlert2](https://sweetalert2.github.io/). but, if the class has been added, and the style still hasn't changed or is crossed out when in the inspect element, try to setting the **buttonsStyling** to **false**. this looks like: ```{customClass: {...}, buttonsStyling: false}``` — Kevin, Feb 06 '21 at 08:29

score 7 · Answer 2 · answered Jan 07 '19 at 19:58

7

The customClass option has been removed. You need to use className now instead. The period before the class name is not necessary.

swal({
  title: success,
  showConfirmButton: false,
  html: true,
  className: "swal-back"
});

answered Jan 07 '19 at 19:58

Neil VanLandingham

1,016
8
15

1

i know this is a pretty old comment, but classname is not mentioned in the package – Achiel Volckaert Mar 30 '22 at 09:53

score 0 · Answer 3 · answered May 25 '20 at 22:51

0

For sweetalert2 you can use customClass with name class.

answered May 25 '20 at 22:51

Mateus Gonçalves

676
5
16

Adding class to sweet alert

3 Answers3

Linked