Sweetconfirm.js
👌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.
Install / Use
/learn @koddr/Sweetconfirm.jsREADME
Docs, Change log
Install
Simple install to your project via npm:
npm install --save sweetconfirm.js
Or include to your html page from fast CDN jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/sweetconfirm.js@0/sweetconfirm.min.js"></script>
How to use?
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!");
});
Use via CDN
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>
What about options?
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 |
Use SweetConfirm.js with custom options
// 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);
Demo on localhost
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.js
Let's serve it (with Python 3, for example):
python3 -m http.server 8080 --bind 127.0.0.1
And now, go to browser to see SweetConfirm.js Example page:
http://127.0.0.1:8080/examples
Size-limit report
npm 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 ms
Thanks to Andrey Sitnik @ai/size-limit.
Developers
- Idea and active development by Vic Shóstak (aka Koddr).
Project assistance
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.
License
MIT
