A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution
for drop an annoying pop-ups confirming the submission of form in your web apps.
Simple install to your project via npm:
npm install --save sweetconfirm.jsOr include to your html page from fast CDN jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/sweetconfirm.js@0/sweetconfirm.min.js"></script>Let's start with HTML page and some CSS styles for submit button (./index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
button {
display: block;
border-radius: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<button type="submit" id="button">💬 Push the button!</button>
<script src="./script.js"></script>
</body>
</html>Next, time for JavaScript (./script.js):
import { SweetConfirm } from "sweetconfirm.js";
// Define element (button)
var button = document.getElementById("button");
// Init SweetConfirm.js to element with callback
new SweetConfirm(button, () => {
console.log("This is fake data!");
});Similar to npm way, but easily (all-in-one ./index.html file):
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<button type="submit" id="button">💬 Push the button!</button>
<div id="message"></div>
<script src="https://cdn.jsdelivr.net/npm/sweetconfirm.js@0/sweetconfirm.min.js"></script>
<script>
// Define vars
var button, message;
button = document.getElementById("button");
message = document.getElementById("message");
// Callback function
function showMessage(element, text) {
element.innerText = text;
}
// Init SweetConfirm.js
new SweetConfirm(button, () => {
showMessage(message, "OK! Refresh page for try again.");
});
</script>
</body>
</html>function SweetConfirm ( element, function () {...}, [options, ...] )| Option | Description | Default value |
|---|---|---|
bg |
Background color for initial state, usually equal to gradient.from_color |
#0f4c81 |
bgSize |
Size of background; for better effect must be greater than 100% at the first value |
215% 100% |
bgPositionIn |
Background position for init animation | right bottom |
bgPositionOut |
Background position for end animation | left bottom |
trans.init |
Enabled initial transition when page is loaded (DOMContentLoaded event) |
true |
trans.in |
A transition speed in seconds for DOMContentLoaded event |
0.5 |
trans.out |
A transition speed in seconds for mouseup event |
0.5 |
gradient.deg |
Angle or position of the gradient line's starting point | 135deg |
gradient.from_color |
From (start) color | #0f4c81 50% |
gradient.to_color |
To (stop, end) color | #fa7268 50% |
question |
Message during holding mouse/key button on element |
🤔 Are you sure? |
success.message |
Message after callback function | 👍 Success! |
success.color |
Color of success message | #00b16a |
timeout |
Time for setTimeout() function in miliseconds; this option also define a transition speed |
3000 |
// Define options
var options = {
bg: "#0f4c81",
bgSize: "215% 100%",
bgPositionIn: "right bottom",
bgPositionOut: "left bottom",
trans: {
init: true,
in: 0.5,
out: 0.5
},
gradient: {
deg: "135deg",
from_color: "#0f4c81 50%",
to_color: "#fa7268 50%"
},
question: "🤔 Are you sure?",
success: {
message: "👍 Success!",
color: "#00b16a"
},
timeout: 3000
};
// Init SweetConfirm.js with options
new SweetConfirm(element, () => {}, options);You may serve downloaded repository by simple Python 3 CLI snippet (for macOS/Linux/Windows WSL).
First, clone repository:
git clone https://github.com/koddr/sweetconfirm.js.git
cd sweetconfirm.jsLet's serve it (with Python 3, for example):
python3 -m http.server 8080 --bind 127.0.0.1And now, go to browser to see SweetConfirm.js Example page:
http://127.0.0.1:8080/examplesnpm run size
Time limit: 70 ms
Size: 434 B with all dependencies, minified and gzipped
Loading time: 10 ms on slow 3G
Running time: 51 ms on Snapdragon 410
Total time: 61 msThanks to Andrey Sitnik @ai/size-limit.
- Idea and active development by Vic Shóstak (aka Koddr).
If you want to say «thank you» or/and support active development SweetConfirm.js:
- Add a GitHub Star to project.
- Twit about project on your Twitter.
- Donate some money to project author via PayPal: @paypal.me/koddr.
- Join DigitalOcean at our referral link (your profit is $100 and we get $25).
Thanks for your support! 😘 Together, we make this project better every day.
MIT