Minimal Customizable Alert/Confirm Dialog Plugin – roar.js

roar.js is a lightweight, responsive, accessible JavaScript dialog plugin to create custom alert and confirmation popup boxes on the web app.

How to use it:

Import the stylesheet ‘roar.min.css’ and JavaScript ‘roar.min.js’ into the document.

<link rel="stylesheet" href="dist/roar.min.css">
<script src="dist/roar.min.js"></script>

Create a default alert dialog.

roar('Alert Title', 'Alert Message Here');

Create a confirmation dialog with confirm/cancel callbacks.

roar('Confirm Title', 'Confirm Message Here',{
  // shows cancel button
  cancel: true,
  // cancel text
  cancelText: 'cancel',
  // cancel callback
  cancelCallBack: function (event) {
    console.log('options.cancelCallBack');
  },
  // shows confirm button
  confirm: true,
  // confirm text
  confirmText: 'confirm',
  // confirm callback
  confirmCallBack: function (event) {
    console.log('options.confirmCallBack');
  }
  
});

Changelog:

08/22/2020

• v1.1.0