sweetalertの2つ以上のボタン2

Question

私は2つのボタンでsweetalertを持っていますが、もう1つのボタンがあります。 たとえば、今のところ、私はyesとnoを持っています。あなたはjQueryのイベントのバインディングでカスタムHTMLを使用する必要があり、それはSweetAlertクラスドンので、あなたが自分でボタンのスタイルを追加する必要がほぼ同じ、唯一の問題を作品事前に

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

感謝:)

Answer 1

を助けてください私のために働く。

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

上記の答えは私のために動作しませんでしたので、私は次のようでした：

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