web-dev-qa-db-fra.com

SweetAlert - Changer la couleur du bouton

J'essaie de changer la couleur du bouton d'annulation comme je peux le faire pour le bouton de confirmation, mais cela ne semble pas fonctionner pour une raison quelconque.

(VOIR https://jsfiddle.net/x20ra1o1/ ))

CODE EST: 

     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: enter code here false
     }, function(isConfirm){
   if (isConfirm) {  
   swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
  } else { 
    swal("Cancelled", "Your imaginary file is safe :)", "error");  
 } 
});
javascriptsweetalert
6
compcobalt

Vous utilisez cette version de SweetAlert: https://github.com/t4t5/sweetalert et dans le fichier JS source ( https://t4t5.github.io/sweetalert/dist/sweetalert-dev. js ), il n’existe pas de paramètre de ce type pour changer la couleur du bouton d’annulation.

Dans le fichier que vous avez utilisé, les paramètres sont:

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

Puis-je vous suggérer d’utiliser cette version de SweetAlert: https://github.com/limonte/sweetalert2 car l’option permettant de modifier la couleur du bouton d’annulation est présente.

Vous pouvez modifier le code source du premier fichier JS, mais il est facilement disponible dans la deuxième version.

Il y a toujours la possibilité d'utiliser CSS pour modifier les couleurs des boutons. Mais si vous souhaitez le rendre personnalisable à l'aide de JS, SweetAlert2 est une meilleure alternative.

11
gurudeb

Ajoutez ceci à votre css pour remplacer le style sweetalert2:

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

Vous pouvez essayer de suivre.

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

Pour avoir un bouton Annuler personnalisé, utilisez la fonction "customClass" et créez votre css pour cibler le bouton Annuler.

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

Il n'y a pas de manière default de le faire. Mais, vous pouvez remplacer le style avec des CSS personnalisés.

Vérifiez ce violon: https://jsfiddle.net/74agy8ew/1/

1
Pranesh Ravi

Douce alerte 1

En CSS, vous pouvez faire ceci:

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

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

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

Ajoutez ceci si vous ne voulez pas que le bouton clignote quand il a cliqué.

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

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

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

J'espère que ça aide: D

1
Elias