sweetconfirm.js is a useful zero dependencies, less than 434 bytes (gzipped), pure JavaScript and CSS solution to bring down annoying popups confirming form submission in your web applications.
Sweet Confirm is a cool confirmation interaction concept that enables the user to confirm the action by clicking and holding the confirmation button.
confirmation dialog box, confirmation dialog best practices, confirmation popup ui, confirmation dialogue, confirmation dialog android
How to make use of it:
1. Install the sweetconfirm.js bundle.
# NPM $ npm install sweetconfirm.js --save
2. Import the sweetconfirm.js.
// as an ES module import { SweetConfirm } from "sweetconfirm.js";
<!-- OR --> <script src="./sweetconfirm.min.js"></script>
3. Create an affirmation button on the web page.
<button id="button">? Push the button!</button>
4. Enable the SweetConfirm on the button and carry out a motion after confirmation.
var button = document.getElementById("button"); function SendMessage(element, message) { document.getElementById(element).innerHTML = message; console.log("This is fake data!", "Green button is disabled now."); } new SweetConfirm(button, () => { SendMessage( "message", "OK! Fake data was sent to console.<br/>Refresh page for try again!" ); });
5. Customize the affirmation button.
var button = document.getElementById("button"); function SendMessage(element, message) { document.getElementById(element).innerHTML = message; console.log("This is fake data!", "Green button is disabled now."); } new SweetConfirm(button, () => { SendMessage( "message", "OK! Fake data was sent to console.<br/>Refresh page for try again!" ); },{ 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 });
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 |
Hold To Confirm Interaction, sweetconfirm js Plugin/Github, confirmation dialog ui
See Demo And Download
Official Website(koddr): Click Here
This superior jQuery/javascript plugin is developed by koddr. For extra Advanced Usages, please go to the official website.
Be First to Comment