Добавление класса в сладкое оповещение

Я пытаюсь добавить дополнительный класс для своего модального окна, чтобы я мог выбрать его из LESS и сделать фон прозрачным. Но customClass не работает. Есть ли другой способ сделать это. Кстати, я уже многое изменил с классами по умолчанию, поэтому мне нужно сделать это только для одного модального окна, не могу повлиять на глобальный swal.

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

javascript less sweetalert2 sweetalert
person nodeSpret    schedule 26.02.2018    source источник
comment
sweetalert.js.org/docs/#classname - поделитесь кодом того, что вы попробовал, это дополнительное свойство, необходимое для добавления нового класса.   -  person Squiggs.    schedule 26.02.2018
comment
Вы используете SweetAlert sweetalert.js.org или SweetAlert2 sweetalert2.github.io?   -  person Limon Monte    schedule 26.02.2018

Ответы (3)


arrow_upward
9
arrow_downward

Предполагая, что OP использует SweetAlert2,

С тех пор customClass изменился со строки на объект.

Ожидается объект, подобный следующему:

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

Официальная строка в документации на момент написания здесь

С другой стороны, будьте осторожны при использовании версий до 8.12.2. и близко к этому, поскольку там была известная ошибка, связанная с пользовательскими классами.

Проблема, связанная с темой, здесь

person JBlanco    schedule 21.02.2020
comment
Это правильный ответ, когда мы используем SweatAlert2. но, если класс был добавлен, а стиль все еще не изменился или перечеркнут в элементе проверки, попробуйте установить для buttonsStyling значение false. это выглядит так: {customClass: {...}, buttonsStyling: false} - person Muhammad Adam C; 06.02.2021

arrow_upward
5
arrow_downward

Опция customClass была удалена. Вместо этого вам нужно использовать className. Точка перед названием класса не обязательна.

swal({
  title: success,
  showConfirmButton: false,
  html: true,
  className: "swal-back"
});
person Neil VanLandingham    schedule 07.01.2019

arrow_upward
0
arrow_downward

Для sweetalert2 вы можете использовать customClass с именем class.

person Mateus Gonçalves    schedule 25.05.2020