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

Solution 1

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

Solution 2

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

Comments

[Kevin]

This is the correct answer when we use SweatAlert2. 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}

[Achiel Volckaert]

i know this is a pretty old comment, but classname is not mentioned in the package