SweetAlert - 更改按钮颜色答案

【问题标题】：SweetAlert - Change Color of ButtonSweetAlert - 更改按钮颜色
【发布时间】：2022-04-06 03:24:53
【问题描述】：

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

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

【问题讨论】：

cancelButtonColor 不是the API 中的选项
我在文档中没有看到该选项。也许那里不支持。您始终可以使用 CSS 创建自己的类。
试试这个.... jsfiddle.net/x20ra1o1/2
感谢哈克曼。它奏效了

标签： javascript sweetalert

【解决方案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 是一个更好的选择。

【讨论】：

这是从 SweetAlert 到 SweetAlert2 的简单迁移指南：github.com/limonte/sweetalert2/wiki/…
是否可以改用 rgba（值）？
只是迟到的评论，SWAL 添加了它不使用的类，例如 .confirm 和 .cancel，这可以在您的样式表中定义，但您需要将背景设置为 !important 因为 SWAL（不是确定我使用了 swal2) 将背景颜色直接放在元素样式属性中的按钮上。

【解决方案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
}
...

【讨论】：

正是我需要的。 buttons 属性接受Object，您可以在其中单独定义每个按钮的属性。加分 untuk pakai Bahasa Indonesia di contoh :)

【解决方案3】：

要拥有自定义取消按钮，请使用“customClass”函数并构建您的 css 以定位取消按钮。

JavaScript：

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

CSS：

.Custom_Cancel > .sa-button-container > .cancel {
   background-color: #DD6B55;
   border-color: #DD6B55;
}
.Custom_Cancel > .sa-button-container > .cancel:hover {
   background-color: #DD6B55;
   border-color: #DD6B55;
}

【讨论】：

当我们无法升级到 SweetAlert 2 时，这是一个非常好的选择。非常有用，我们也可以使用 .Custom_Cancel 类通过 css 自定义确认按钮。
我们仍在使用旧版本的 sweetalert。我们正在升级 sweetalert，但同时这个解决方案是完美的。谢谢。

【解决方案4】：

对于想要使用SweetAlert2的人，例如：

您也可以根据需要migrate from SweetAlert to SweetAlert2。

Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this! ⚠️",
  type: 'warning',
  showCancelButton: true,
  // Background color of the "Confirm"-button. The default color is #3085d6
  confirmButtonColor: 'LightSeaGreen',
  // Background color of the "Cancel"-button. The default color is #aaa
  cancelButtonColor: 'Crimson',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    Swal.fire({
      type: 'success',
      title: 'Deleted!',
      text: "Your file has been deleted.",
      timer: 2000,
      showCancelButton: false,
      showConfirmButton: false
    })
  }
})

&lt;script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"&gt;&lt;/script&gt;

升级到 SweetAlert2 的 v9.x。

重大更改 - 将 type 重命名为 icon

Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this! ⚠️",
  icon: 'warning',
  showCancelButton: true,
  // Background color of the "Confirm"-button. The default color is #3085d6
  confirmButtonColor: 'LightSeaGreen',
  // Background color of the "Cancel"-button. The default color is #aaa
  cancelButtonColor: 'Crimson',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    Swal.fire({
      icon: 'success',
      title: 'Deleted!',
      text: "Your file has been deleted.",
      timer: 2000,
      showCancelButton: false,
      showConfirmButton: false
    })
  }
})

&lt;script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"&gt;&lt;/script&gt;

【讨论】：

【解决方案5】：

您可以尝试关注。

SweetAlert.swal({
                        title: 'Thank you',
                        text: 'Thank you for using the quoting tool. Your Quote PDF has been downloaded. The quote has been sent to U.S. Legal for approval.',
                        type: 'warning',
                        confirmButtonText: 'Cancel',
    confirmButtonColor: "#DD6B55"});

【讨论】：

悬停怎么样？

【解决方案6】：

甜蜜警报 1

在 CSS 中你可以这样做：

.swal-button--confirm {
    background: #0a0;
}

.swal-button--cancel {
    background: #aaa;
}

.swal-button--danger {
    background: #a00;
}

如果您不希望按钮在单击时闪烁，请添加此项。

.swal-button--confirm:active {
    background: #0a0;
}

.swal-button--cancel:active {
    background: #aaa;
}

.swal-button--danger:active {
    background: #a00;
}

希望对你有帮助：D

【讨论】：

【解决方案7】：

将此添加到您的 css 以覆盖 sweetalert2 样式：

.swal2-styled.swal2-cancel{
  background-color: #dc3545 !important;
}

【讨论】：

不要成为重要的人。没有人喜欢那个人。

【解决方案8】：

您可以为每个按钮设置类

            customClass: {
                confirmButton: 'btn btn-primary',
                cancelButton: 'btn btn-secondary',
            }

【讨论】：

【解决方案9】：

没有default 这样做的方式。但是，您可以使用自定义 css 覆盖样式..

检查这个小提琴：https://jsfiddle.net/74agy8ew/1/

【讨论】：

【解决方案10】：

我找到的最简单的解决方案：

将此添加到 app.css：

.swal-modal {
    background-color: rgba(0, 0, 0, 0.651);
    color: white;
}
.swal-text {
    color: white;
    font-size: 33px;
}
.swal-button {
    background-color: #ff2600;
    color: #ffffff;
}

【讨论】：

【解决方案11】：

confirmButtonColor 不再使用。相反，您应该通过 CSS 指定所有样式更改。作为一种有用的速记，您可以设置 dangerMode: true 以使确认按钮变为红色。否则，您可以在按钮对象中指定一个类。 enter link description here

【讨论】：

【解决方案12】：

对于 Sweetalert2

Swal.fire({
  title: "Error!",
  text: "Image is not selected",
  icon: "error",
  confirmButtonText: "OK",
  showCloseButton:true,
});


css

.swal2-close{
 background-color:black;
 color: red;
 }

【讨论】：

【解决方案13】：

在 CSS 中你可以这样做

.sweet-alert button.cancel {
    background-color: #FE9475;
}

【讨论】：

【解决方案14】：

对于 sweetalert2 v11.4.0

我在js中使用

Swal.fire({
  title: 'My title',
  text: 'description',
  icon: 'success',
  buttonsStyling: false,
  customClass: {
    confirmButton: 'sweet-alert-button'
  },
})

在css中

.sweet-alert-button {
  background: #fac62d;
}

【讨论】：