<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SweetAlert Confirmation Dialog</title>
<!-- Include SweetAlert CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
</head>
<body>
<button id="yourButtonId">Click Me</button>
<!-- Include SweetAlert JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
<!-- Include custom JS -->
</body>
</html>
<script>
showAlert("success", "Success!", "Your operation was successful.");
showAlert("error", "Error!", "Something went wrong.");
showAlert("warning", "Warning!", "This is a warning message.");
function showConfirmationDialog(title, text, confirmButtonText, cancelButtonText, onConfirm, onCancel) {
Swal.fire({
title: title,
text: text,
icon: 'info',
showCancelButton: true,
confirmButtonText: confirmButtonText,
cancelButtonText: cancelButtonText,
allowOutsideClick: false,
}).then((result) => {
if (result.isConfirmed) {
if (onConfirm) {
onConfirm();
}
} else if (result.dismiss === Swal.DismissReason.cancel) {
if (onCancel) {
onCancel();
}
}
});
}
document.getElementById('yourButtonId').addEventListener('click', function() {
showConfirmationDialog(
'Are you sure?',
'You won\'t be able to revert this!',
'Yes',
'No',
function() {
// Code to execute on confirmation
console.log('Confirmed!');
},
function() {
// Code to execute on cancellation
console.log('Cancelled!');
}
);
});
function showAlert(type, title, text) {
Swal.fire({
title: title,
text: text,
icon: type,
button: "OK"
});
}
// Usage examples
</script>
Comments
Post a Comment