Solución:
Debería usar HTML personalizado con enlaces de eventos jQuery, funciona casi igual, el único problema es que necesita agregar estilo a los botones usted mismo porque las clases de SweetAlert no funcionan para mí.
$(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>
La respuesta anterior no funcionó para mí, así que hice lo siguiente:
$(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>
Una vez tuve que agregar el tercer botón a la ventana emergente SweetAlert2. La forma más sencilla en mi caso fue usar footer
que puede ser texto sin formato o HTML:
$(function() {
$('.btn').click(function(e) {
e.preventDefault();
Swal.fire({
icon: 'warning',
title: 'Are you sure?',
text: 'You won't be able to revert this!',
showCloseButton: true,
showCancelButton: true,
footer: '<a href="https://foroayuda.es/#!" id="some-action">Some action</a>'
}).then((result) => {
console.log(result);
});
});
$(document).on('click', '#some-action', function(e) {
e.preventDefault();
console.log('Some action triggered.');
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div class="text-center">
<button type="button" class="btn btn-primary my-3">Click me</button>
</div>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)