Minimal Confirmation Modal Dialog In JavaScript – Confirmo

Preview:

Description:

Confirmo is a minimal clean confirm modal dialog component that can be used to ask your users to confirm before performing an action.

How to use it:

1. Import the Confirmo’s JavaScript and CSS files into the page.

<link rel="stylesheet" href="./src/confirmo.css" />
<script src="./src/confirmo.js"></script>

2. Create a new instance of the Confirmo and config the confirm dialog using the following props.

confirmo.init({
  yesBg: 'green',
  noBg: 'red',
  backColor: 'black',
  textColor: 'white'
});

3. Show the confirm dialog on the screen, define the confirm message, and determine the action to trigger as follows:

confirmo.show({
  msg: "Replace this text with what you want to prompt!",
  callback: function (){
    // confirmed
  }
});

4. You can also customize the confirm dialog via only HTML data attributes:

<button confirmo-message="Hello world" 
        confirmo-func="hello">
        Confirm
</button>

confirmo.init();

function hello(){
  alert('Confirmed!');
}