SweetAlert - 改变按钮的颜色

Question

我正在尝试像更改确认按钮一样更改取消按钮的颜色，但由于某种原因它似乎不起作用。

 swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    cancelButtonColor: "#DD6B55",
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, cancel please!",
    closeOnConfirm: false,
    closeOnCancel: false
}, function (isConfirm) {
    if (isConfirm) {
        swal("Deleted!", "Your imaginary file has been deleted.", "success");
    } else {
        swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
});

原文由 compcobalt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在使用此版本的 SweetAlert： https ://github.com/t4t5/sweetalert 并且在源 JS 文件（ https://t4t5.github.io/sweetalert/dist/sweetalert-dev.js ）中，没有这样的参数改变取消按钮的颜色。

在您使用的文件中，参数是：

 var defaultParams = {
  title: '',
  text: '',
  type: null,
  allowOutsideClick: false,
  showConfirmButton: true,
  showCancelButton: false,
  closeOnConfirm: true,
  closeOnCancel: true,
  confirmButtonText: 'OK',
  confirmButtonColor: '#8CD4F5',
  cancelButtonText: 'Cancel',
  imageUrl: null,
  imageSize: null,
  timer: null,
  customClass: '',
  html: false,
  animation: true,
  allowEscapeKey: true,
  inputType: 'text',
  inputPlaceholder: '',
  inputValue: '',
  showLoaderOnConfirm: false
};

我可以建议您使用此版本的 SweetAlert： https ://github.com/limonte/sweetalert2，因为此处存在更改取消按钮颜色的选项。

您可以修改第一个 JS 文件的源代码，但是在第二个版本中它很容易获得。

始终可以使用 CSS 修改按钮颜色的选项。但是如果你想使用 JS 来定制它，那么 SweetAlert2 是一个更好的选择。

原文由 gurudeb 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

[更新 => 悬停选项]

也许它会帮助使用第二版的人

https://sweetalert.js.org/guides/#installation

Javascript

 swal({
    title: "Apakah anda yakin?",
    text: "Anda dapat mengaktifkannya lagi nanti...",
    icon: "warning",
    buttons: {
        confirm : {text:'Ubah',className:'sweet-warning'},
        cancel : 'Batalkan'
    },
}).then((will)=>{
    if(will){
        $(".onoffswitch-checkbox").prop('checked',false);
    }else{
        $("#all_petugas").click();
    }
});

CSS

 ...
.sweet-warning{
 background-color: black;
 #or anything you wanna do with the button
}

.sweet-warning:not([disabled]):hover{
 #hover here
}
...

原文由 Akbar Noto 发布，翻译遵循 CC BY-SA 4.0 许可协议