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 - лучшая альтернатива.

Ответ 2

Вы можете попробовать следующее.

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

Ответ 3

Добавьте это в свой CSS, чтобы переопределить стиль sweetalert2:

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

Ответ 4

Sweet Alert 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

Ответ 5

[update => опция наведения]

Может быть, это поможет кому-то, кто использует эту версию 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
}
...

Ответ 6

Чтобы создать пользовательскую кнопку "Отмена", используйте функцию "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;
}

Ответ 7

Нет способа default сделать это. Но вы можете переопределить стиль с помощью пользовательского css..

Проверьте эту скрипту: https://jsfiddle.net/74agy8ew/1/

Ответ 8

Для тех, кто хочет использовать SweetAlert2, например:

При необходимости вы также можете мигрировать из 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/[email protected]"></script>