More than 2 buttons on sweetalert 2
You should use custom HTML with jQuery event bindings, it works almost the same, only problem that you need to add styling for buttons by yourself because SweetAlert classes don't work for me.
$(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>The above answer didn't work for me, so I did the following:
$(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>