Press "Enter" to skip to content

Annoying Pop-ups Confirming the Submission of Form | sweetconfirm.js

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
});
OptionDescriptionDefault value
bgBackground color for initial state, usually equal to gradient.from_color#0f4c81
bgSizeSize of background; for better effect must be greater than 100% at the first value215% 100%
bgPositionInBackground position for init animationright bottom
bgPositionOutBackground position for end animationleft bottom
trans.initEnabled initial transition when page is loaded (DOMContentLoaded event)true
trans.intransition speed in seconds for DOMContentLoaded event0.5
trans.outtransition speed in seconds for mouseup event0.5
gradient.degAngle or position of the gradient line’s starting point135deg
gradient.from_colorFrom (start) color#0f4c81 50%
gradient.to_colorTo (stop, end) color#fa7268 50%
questionMessage during holding mouse/key button on element🤔 Are you sure?
success.messageMessage after callback function👍 Success!
success.colorColor of success message#00b16a
timeoutTime for setTimeout() function in miliseconds; this option also define a transition speed3000

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

    Leave a Reply

    Your email address will not be published.