Saltar al contenido

SweetAlert – Cambiar el color del botón

Solución:

Está utilizando esta versión de SweetAlert: https://github.com/t4t5/sweetalert y en el archivo JS de origen (https://t4t5.github.io/sweetalert/dist/sweetalert-dev.js), no hay tal parámetro para cambiar el color del botón cancelar.

En el archivo que ha utilizado, los parámetros son:

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

Puedo sugerirle que use esta versión de SweetAlert: https://github.com/limonte/sweetalert2 ya que aquí está presente la opción para cambiar el color del botón de cancelación.

Puede modificar el código fuente del primer archivo JS, sin embargo, en la segunda versión está disponible.

Siempre está disponible la opción de usar CSS para modificar los colores de los botones. Pero si desea personalizarlo con JS, SweetAlert2 es una mejor alternativa.

[update => hover option]

Tal vez ayude a alguien que use la segunda versión
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
}
...

Para tener un botón Cancelar personalizado, use la función “customClass” y cree su css para apuntar al botón cancelar.

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;
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *