Custom Confirmation Modal In Vanilla JavaScript – custom-confirm.js

Preview:

Description:

custom-confirm.js is a lightweight vanilla JavaScript library to create customizable confirmation dialog boxes that allow to perform custom actions as you click the confirm/cancel buttons.

How to use it:

Load the style sheet custom-confirm.css for the basic CSS styles.

<link rel="stylesheet" href="custom-confirm.css">

Load the JavaScript file custom-confirm.js in the html document.

<script src="custom-confirm.js"></script>

Bind the custom-confirm to your a tag.

CustomConfirm('a', function (confirmed, element) {
  if (confirmed) {
      // do what you want (play with target element, ajax...)
      location.href = element.href;
  } else {
      // do something or... nothing, if you want to
  }
});

Bind the custom-confirm to your buttons.

CustomConfirm('button', function (confirmed, element) {
  // play with the target element or anything else
  if (confirmed) {
      element.parentNode.remove();
  } else {
      var p = document.createElement('p');
      p.innerHTML = 'A Wise decision has been made for LI <strong>' + element.previousSibling.textContent + '</strong>';
      element.parentNode.parentNode.appendChild(p);
  }
});