你好,我的朋友你好吗?
我有一个关于如何更改的简单问题[默认确认对话框消息更改为SweetAlert2确认对话框。我多次尝试了很多技巧,但没有任何效果...
我做了这个简单的代码,但是我自己的JS代码中的问题是,当我在Sweetalert2对话框中单击ConfirmButton时,通常没有任何反应,应该关闭模态。
在实时预览中查看: codepen
HTML代码:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="file"
id="ID12"
name="avatar"
value="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JS代码:
$(document).on('hide.bs.modal', '#exampleModal', function (e) {
if ($('#ID12').val() != '') {
const CancelUploadConfirmation = false;
if (!CancelUploadConfirmation) {
e.preventDefault();
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: 'btn btn-danger mr-2',
cancelButton: 'btn btn-success'
},
buttonsStyling: false
})
swalWithBootstrapButtons.fire({
title: 'Are you sure? 🤔',
text: "Do you really want to Cancel the Personal Picture Upload?",
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Yes, I am! 🥺',
cancelButtonText: "No, I'm Not 😊",
showClass: {
popup: 'animated fadeInDown faster'
},
hideClass: {
popup: 'animated fadeOutUp faster'
}
}).then((CancelConfirmationResult) => {
if (CancelConfirmationResult.value) {
CancelUploadConfirmation = true;
} else if (CancelConfirmationResult.dismiss === Swal.DismissReason.cancel)
{
swalWithBootstrapButtons.fire({
title: 'Fantastic 🤗',
text: "We are happy 🎉 that you still want to Upload your Own Personal picture!",
icon: 'success',
showConfirmButton: false,
timer: 1800,
showClass: {
popup: 'animated fadeInDown faster'
},
hideClass: {
popup: 'animated fadeOutUp faster'
}
})
}
});
}
}
});
您可以这样做,但是您需要一些步骤来更新确认过程,现在回调将处理确认
window.confirm = function(message, callback) {
callback = callback || function() {};
var options = {
title: "Are you sure?",
text: message,
type: "warning",
showCancelButton: true
};
if (typeof message === "object") {
options = message;
}
Swal.fire(options).then(function(response) {
callback(response.value)
});
};
confirm(
"Are you sure! 🤔 you want to Close the modal and Cancel your Upload? 🙄",
function(CancelUploadConfirmation) {
console.log(CancelUploadConfirmation);
if (CancelUploadConfirmation) {
alert("hi");
} else {
}
}
);