将课程添加到甜蜜警报答案

【问题标题】：Adding class to sweet alert将课程添加到甜蜜警报
【发布时间】：2018-02-26 10:12:17
【问题描述】：

我正在尝试为我的模态添加一个额外的类，以便我可以从 LESS 中选择它并将其背景变为透明。但是 customClass 不起作用。有没有其他方法可以做到这一点。顺便说一句，我已经对默认类进行了很多更改，所以我只需要为一个模式执行此操作，不能影响全局 swal。

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

【问题讨论】：

sweetalert.js.org/docs/#classname - 分享一些您尝试过的代码，这是添加新类所需的附加属性。
您使用的是 SweetAlert sweetalert.js.org 还是 SweetAlert2 sweetalert2.github.io ？

标签： javascript less sweetalert sweetalert2

【解决方案1】：

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

撰写本文时文档中的官方线路here

另一方面，使用8.12.2 之前的版本时要小心，因为存在与自定义类相关的已知错误。

主题here相关问题

【讨论】：

这是我们使用SweatAlert2时的正确答案。但是，如果已添加类，并且样式仍未更改或在检查元素中被划掉，请尝试将 buttonsStyling 设置为 false。这看起来像：{customClass: {...}, buttonsStyling: false}

【解决方案2】：

customClass 选项已被删除。您现在需要使用className。类名前的句点不是必须的。

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

【讨论】：

【解决方案3】：

对于 sweetalert2，您可以将 customClass 与名称类一起使用。

【讨论】：