Minimal Stylish Alternative To Browser Confirm Dialogs – JavaScript Confirm

JavaScript Confirm is a lightweight JavaScript plugin that creates stylish, minimalist confirmation dialogs to confirm user actions before proceeding, such as deleting an item or submitting a form.

You can easily style the confirm dialog and actions buttons to match your project’s design and provide specific instructions or information to the user.

How to use it:

1. Include both javascript-confirm.min.css and javascript-confirm.min.js in your HTML file.

<link rel="stylesheet" href="javascript-confirm.min.css" />
<script src="javascript-confirm.min.js"></script>

2. Create an HTML element that will trigger the confirmation dialog when interacted with. This could be a button, a link, or any other HTML element.

<button id="trigger">
  Confirm Button
</button>

3. Initialize JavaScript Confirm and attach it to your trigger element. This example shows a basic confirmation dialog with a callback function that executes when the user clicks “Confirm”:

var element = document.getElementById("trigger");
javascriptConfirm(element, {
  onConfirm: function() {
    alert("Deleted")
  },
});

4. You can further customize the confirm dialog with additional options and callbacks. Below are the available configuration options:

javascriptConfirm(element, {
  title: '',
  message: 'Are you sure?',
  confirmText: 'Yes',
  cancelText: 'No',
  confirmClass: 'jc-btn jc-success',
  cancelClass: 'jc-btn jc-danger',
  cancelOnBackdropClick: false,
  cancelOnEscClick: false,
  width: '300px',
  // callbacks
  onConfirm: function() {},
  onCancel: function() {},
});