我正在使用最新版本的sweetalert2 jQuery插件。
我有一个带2个按钮的简单SweetAlert。1按钮是确认按钮,另一个是取消按钮。我正在使用HTML选项将文本输入添加到警报中。当用户按确认按钮时,执行AJAX调用并关闭警报。
现在,我想使用"取消"按钮执行其他代码,而不是关闭警报的默认操作。(用户可以使用ShowClosebutton关闭警报:true)。
因此,简而言之:如何卸下关闭处理程序并将自己的自定义处理程序添加到Swal的取消按钮?
只需添加您的自定义功能即可捕捉拒绝,例如:
swal({
title: 'Some title',
text: 'some text for the popup',
type: 'warning',
showCancelButton: true,
cancelButtonText: 'Some text for cancel button'
}).then(function(){
// function when confirm button clicked
}, function(dismiss){
if(dismiss == 'cancel'){
// function when cancel button is clicked
}
});
您甚至可以添加更多功能来捕获另一个解雇活动,只需阅读SweetAlert2文档以获取有关解雇活动的更多信息。
,对@raditya adi baskara答案进行了一些自定义,
swal({
title: "$titleWarnignBox",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#36c6d3',
cancelButtonColor: '#d33',
confirmButtonText: '$confrimBtn',
cancelButtonText: '$cancelBtn'
}).then(function(result){
if(result.value){
console.log('good');
}else if(result.dismiss == 'cancel'){
console.log('cancel');
}
});
- 您可以创建一个自定义的HTML文件,并在其上触发您自己的取消处理程序中有一个取消按钮。
例如
<html> <!--custom.html-->
<button id="confirmBtn">confirm<button>
<button id="cancelBtn">cancel<button>
<html>
$.get("custom.html", function (data) {
swal({
html: data,
showCloseButton: false,
showCancelButton: false,
showConfirmButton: false
});
$("#cancelBtn").click(function () {
//handle your cancel button being clicked
$.when($.ajax({....})).then(function() {
// when all AJAX requests are complete
});
});
$("#confirmBtn").click(function () {
//handle your confirm button being clicked
});
});
您可以回想起取消的弹出窗口。将其添加到您的Swal功能中。
function (dismiss) { if (dismiss === 'cancel') { swal({..}); } }
所以完整
swal({
title: 'Swal Title',
text: 'Your swal text',
type: 'warning',
showCancelButton: true,
cancelButtonText: 'cancel'
}).then(function(){
//Confirmed
}, function(dismiss){
if(dismiss == 'cancel'){
//swal({..}); //un-comment this line to add another sweet alert popup on cancel
}
});
在sweetalert2中。
swal.fire({ 标题:"这里的标题", Showclosebutton:错误, Showcancelbutton:是的, Showconfirmbutton:错误, focusconfirm:false, 允许IDECLICK:false, 允许keykey:false, CANCAL BUTTONTEXT:"取消付款" })。然后(function(res){ 如果(res.isdismissed){ 警报("取消按钮单击"); } });
在SweetAlert 2
中 swal.fire({
title: "Notice",
text: "Are you sure ?",
showCancelButton: true,
type: 'error',
cancelButtonColor: '#d33',
})
.then((res) => {
if(res.value){
console.log('confirmed');
}else if(res.dismiss == 'cancel'){
console.log('cancel');
}
else if(res.dismiss == 'esc'){
console.log('cancle-esc**strong text**');
}
});
在sweetalert2
中,如果要在单击取消按钮时防止关闭,则可以将自己的自定义按钮添加为html:
var onBtnClicked = (btnId) => {
// Swal.close();
alert("you choosed: " + btnId);
};
Swal.fire({
title: "What you want to do?",
icon: "warning",
showConfirmButton: false,
showCloseButton: true,
html: `
<p>select an action</p>
<div>
<button class="btn btn-primary" onclick="onBtnClicked('reply')">Reply</button>
<button class="btn btn-danger" onclick="onBtnClicked('delete')">Delete</button>
</div>`
});
Swal.fire({
title: "Please enter TPL coverage",
input: 'text',
showCancelButton: true,
allowOutsideClick: false,
preConfirm: (value) => {
if (value > 100000000) {
Swal.showValidationMessage('Max Rp.100.000.000 !')
};
}
}).then((result) => {
if (result.isConfirmed) {
if (result.value) {
let typeOfCarid = $('#typeOfCarid').val();
let calculate;
if (typeOfCarid != 2) {
if (result.value > 50000000) {
calculate = (25000000 * 1 / 100) + (25000000 * 0.5 / 100) + ((result.value - 50000000) * 0.25 / 100);
//Correct By Calculate Manual MF
} else if (result.value > 25000000) {
calculate = (25000000 * 1 / 100) + ((result.value - 25000000) * 0.5 / 100);
//Correct By Calculate Manual MF
} else {
calculate = (result.value * 1 / 100);
}
$('#tplRate').val(calculate);
} else {
alert('Ini Bus / Truck');
}
}
} else if (result.isDismissed) {
alert('dismis');
}
});
这是我获得它的最佳方式
function sw_alert() {
Swal.fire({
title: 'Your title',
icon: 'warning',
showDenyButton: true,
showCancelButton: true,
confirmButtonColor: '#000000',
cancelButtonColor: '#a8a8a8',
confirmButtonText: 'Yes',
denyButtonText: 'No',
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
console.log('Yes');
} else if (result.isDenied) {
console.log('No');
} else {
console.log('cancel');
}
})
}