web-dev-qa-db-fra.com

Plus de 2 boutons sur sweetalert 2

J'ai un sweetalert avec 2 boutons mais je veux avoir un bouton de plus dedans. Par exemple, pour l'instant, j'ai oui et non, je veux ajouter un bouton plus tard. s'il vous plaît aider

$("#close_account").on("click", function(e) {
        e.preventDefault();
        swal({
          title: "Are you sure?",
          text: "You will not be able to open  your account!",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "Yes, close my account!",
          closeOnConfirm: false
        },
        function(){
          window.location.href="<?php echo base_url().'users/close_account' ?>"
        });
    });

Merci d'avance:)

javascriptjquerysweetalertsweetalert2
12
Sukhwinder Sodhi

Vous devez utiliser du HTML personnalisé avec des liaisons d'événements jQuery, cela fonctionne presque de la même manière, seul problème dont vous avez besoin pour ajouter le style des boutons par vous-même car les classes SweetAlert ne fonctionnent pas pour moi.

$(document).ready(function() {
  $("#close_account").on("click", function(e) {
    var buttons = $('<div>')
    .append(createButton('Ok', function() {
       swal.close();
       console.log('ok'); 
    })).append(createButton('Later', function() {
       swal.close();
       console.log('Later'); 
    })).append(createButton('Cancel', function() {
       swal.close();
       console.log('Cancel');
    }));
    
    e.preventDefault();
    swal({
      title: "Are you sure?",
      html: buttons,
      type: "warning",
      showConfirmButton: false,
      showCancelButton: false
    });
  });
});

function createButton(text, cb) {
  return $('<button>' + text + '</button>').on('click', cb);
}
<link href="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="close_account">Show</button>
18
Konstantin Azizov

Richard Cook a remarqué ci-dessus que la réponse originale (fournie par Konstantin Azizov) a cessé de fonctionner avec la version 4.2.6 de SweetAlert2. Il a suggéré que cela avait à voir avec les nœuds en cours de clonage lors de leur ajout au code HTML. Je ne connais pas assez SweetAlert2 pour dire s'il avait raison ou non. Je pouvais voir, cependant, que mes boutons avaient été ajoutés mais les fonctions de rappel onclick n'avaient jamais été appelées.

Avec un peu d'effort, j'ai pu faire fonctionner cela avec la version actuelle de SweetAlert2. Pour que cela fonctionne, j'ai dû attribuer les événements onclick aux boutons ultérieurement. J'ai fini par ajouter des identifiants aux boutons, ce qui les rend faciles à sélectionner dans jQuery. Ensuite, j'ai ajouté la fonction onOpen à mon objet Swal et là, j'ai connecté la logique pour associer les fonctions de rappel. Voici un extrait du code qui fonctionne pour moi.

Notez également que le message et les boutons utilisent certaines classes SweetAlert2 existantes afin qu'ils aient le même aspect que les éléments d'interface utilisateur existants. Un mot d'avertissement, j'ai essayé d'utiliser les classes swal2-confirm et swal2-cancel. Quand je l'ai fait, j'ai rencontré quelques problèmes. Il se peut que le code SweetAlert2 dépende du fait qu'il n'y ait qu'un seul élément qui utilise cette classe. Je n'ai pas eu le temps de le poursuivre, j'ai donc juste arrêté d'utiliser ces cours.

function createButton(text, id) {
        return $('<button class="swal2-input swal2-styled" id="'+id+'">'+text+'</button>');
    }

    function createMessage(text) {
        return $('<div class="swal2-content" style="display: block;">'+text+'</div>');
    }

function swThreeButton(msg, textOne, textTwo, textThree, callbackOne, callbackTwo, callbackThree) {

        var buttonsPlus = $('<div>')
                .append(createMessage(msg))
                .append(createButton(textOne,'sw_butt1'))
                .append(createButton(textTwo,'sw_butt2'))
                .append(createButton(textThree,'sw_butt3'));

        swal({
            title: 'Select Option',
            html: buttonsPlus,
            type: 'question',

            showCancelButton: false,
            showConfirmButton: false,
            animation: false,
            customClass: "animated zoomIn",
            onOpen: function (dObj) {
                $('#sw_butt1').on('click',function () {
                   swal.close();
                   callbackOne();
                });
                $('#sw_butt2').on('click',function () {
                    swal.close();
                    callbackTwo();
                });
                $('#sw_butt3').on('click',function () {
                    swal.close();
                    callbackThree();
                });
            }
        });

    };
1
KW402