Javascript SweetAlert - 改变按钮的颜色

SweetAlert - Change Color of Button

提问by compcobalt

I'm trying to change the color of the cancel button like I can for the confirm button but it doesn't seem to work for some reason.

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

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

回答by gurudeb

You are using this version of SweetAlert: https://github.com/t4t5/sweetalertand in the source JS file (https://t4t5.github.io/sweetalert/dist/sweetalert-dev.js), there is no such parameter to change color of cancel button.

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

In the file you have used, the params are:

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

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

May I suggest you to use this version of SweetAlert: https://github.com/limonte/sweetalert2as here the option to change the cancel button color is present.

我建议您使用此版本的 SweetAlert：https: //github.com/limonte/sweetalert2，因为这里提供了更改取消按钮颜色的选项。

You can modify the source code of the first JS file, however in the second version it is readily available.

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

There is always the option available to use CSS to modify button colors. But if you want to make it customizable using JS, then SweetAlert2 is a better alternative.

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

回答by Akbar Noto

[update => hover option]

[更新 => 悬停选项]

Maybe it'll help someone who use 2nd version
https://sweetalert.js.org/guides/#installation

也许它会帮助使用第二版
https://sweetalert.js.org/guides/#installation 的人

Javascript

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

CSS

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

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

回答by Elias

Sweet Alert 1

甜蜜警报 1

In CSS you can do this:

在 CSS 中，你可以这样做：

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

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

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

Add this if you don't want the button flash when it clicked.

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

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

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

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

Hope it helps :D

希望它有帮助：D

回答by krisph

To have a custom Cancel button use the "customClass" function and build your css to target the cancel button.

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

JavaScript:

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:

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

回答by Jignesh Mesvaniya

You can try following.

您可以尝试以下。

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

回答by Rye

Add this to your css to override sweetalert2 style:

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

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

回答by Pranesh Ravi

There is no defaultway of doing this. But, you can override the style with custom css..

没有default办法做到这一点。但是，您可以使用自定义 css 覆盖样式。

Check this fiddle: https://jsfiddle.net/74agy8ew/1/

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

回答by Penny Liu

For those who want to use SweetAlert2, for example:

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

You can also migrate from SweetAlert to SweetAlert2as needed.

您还可以根据需要从 SweetAlert 迁移到 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
    })
  }
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

---

---

Upgrading to v9.xof SweetAlert2.

升级到v9.xSweetAlert2。

Breaking change- rename typeto icon

重大更改- 重命名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
    })
  }
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>