Confirm before performing any risky operation
To use this you need to link the stylesheet and script on your html file
For this case only i will suggest you to put them inside header tag, so the confirmation functionlity will available to your entire application.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-Confirmation</title>
<!-- stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- icons -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<!-- script -->
<script type="text/javascript" src="script.js"></script>
</head>- Delete Confirmation Through Form
<form action="https://www.google.com" onsubmit="deleteConfirmation(event)">
<button type="submit">Delete</button>
</form>- Form Submit Confirmation
<form action="https://www.google.com" onsubmit="formConfirmation(event)">
<button type="submit">Submit</button>
</form>- Conrimation Through JavaScript
let btn = document.getElementById('myBtn');
btn.onclick = async function () {
const result = await Confirm.confirmationModal();
if (result === 1) {
console.log("Confirmed! Proceed with deletion.");
// Perform operation
} else {
console.log("Cancelled! No action taken.");
// Abort operation
}
}- Full Configured Conrimation Through JavaScript
let btn = document.getElementById('myBtn');
btn.onclick = async function () {
const result = await Confirm.confirmationModal({
icon: "bx bx-error-alt",
iconColor: "#ffcb7a",
title: "Warning!",
message: "This action cannot be undone!",
noBtnText: "No, thanks",
yesBtnText: "Absolutely!",
noBtnColor: "#fff",
noBtnBackgroundColor: "#e74c3c",
yesBtnColor: "#fff",
yesBtnBackgroundColor: "#2ecc71",
theme: "dark", // dark, light
animation: "slide", // slide, flip, zoom, rotate
backgroundEffect: "blackish" // blackish, blur, none
});
if (result === 1) {
console.log("Confirmed! Proceed with deletion.");
// Perform operation
} else {
console.log("Cancelled! No action taken.");
// Abort operation
}
}This project is currently under development. We will add more customizations in the near/far future.