Mehr als 2 Tasten auf sweetalert 2

Question

Ich habe ein Sweetalert mit 2 Tasten, aber ich möchte eine weitere Taste haben. Zum Beispiel habe ich jetzt ja und nein möchte ich einen weiteren Button später sagen. bitte helfen

$("#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' ?>" 
     }); 
    }); 

Vielen Dank im Voraus :)

Answer 1

Sie benutzerdefinierte HTML mit jQuery Ereignisbindungen verwenden sollten, ist es fast das gleiche, nur Problem arbeitet, die Sie Styling für die Tasten selbst hinzufügen müssen, weil SweetAlert Klassen don arbeite nicht für mich.

$(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>

Answer 2

Die obige Antwort für mich funktionierte nicht, so dass ich die folgenden:

$(document).on('click', '.SwalBtn1', function() { 
 
     //Some code 1 
 
     console.log('Button 1'); 
 
     swal.clickConfirm(); 
 
    }); 
 
    $(document).on('click', '.SwalBtn2', function() { 
 
     //Some code 2 
 
     console.log('Button 2'); 
 
     swal.clickConfirm(); 
 
    }); 
 

 
$('#ShowBtn').click(function(){ 
 
    swal({ 
 
     title: 'Title', 
 
     html: "Some Text" + 
 
      "<br>" + 
 
      '<button type="button" role="button" tabindex="0" class="SwalBtn1 customSwalBtn">' + 'Button1' + '</button>' + 
 
      '<button type="button" role="button" tabindex="0" class="SwalBtn2 customSwalBtn">' + 'Button2' + '</button>', 
 
     showCancelButton: false, 
 
     showConfirmButton: false 
 
    }); 
 
});

.customSwalBtn{ 
 
\t \t background-color: rgba(214,130,47,1.00); 
 
    border-left-color: rgba(214,130,47,1.00); 
 
    border-right-color: rgba(214,130,47,1.00); 
 
    border: 0; 
 
    border-radius: 3px; 
 
    box-shadow: none; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size: 17px; 
 
    font-weight: 500; 
 
    margin: 30px 5px 0px 5px; 
 
    padding: 10px 32px; 
 
\t }

<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="ShowBtn" class="customSwalBtn">Alert</button>