sweetalert 2上有2个以上的按钮

Question

我有一个带2个按钮的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

您应该使用带有jQuery事件绑定的自定义HTML,它的工作方式几乎相同,只需要自己为按钮添加样式,因为SweetAlert类对我不起作用.

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

我们最近发布了SweetAlert2 v10，支持第三个“拒绝”按钮：

Swal.fire({
  title: 'Do you want to save the changes?',
  showDenyButton: true,
  showCancelButton: true,
  confirmButtonText: `Save`,
  denyButtonText: `Don't save`,
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire('Saved!', '', 'success')
  } else if (result.isDenied) {
    Swal.fire('Changes are not saved', '', 'info')
  }
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> 

Answer 3

上面的答案对我不起作用,所以我做了以下几点:

    $(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{
		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;
	}

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