Minimal Confirmation Dialog With jQuery - CW.js

File Size: 4.91 KB
Views Total: 888
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Confirmation Dialog With jQuery - CW.js

CW.js is a super small (less than 2kb) jQuery plugin that creates a customizable, dark/light dialog box to confirm user intentions with custom confirm and cancel functions.

How to use it:

1. Load the necessary stylesheet jquery.cw.css in the document that provides the basic styling and themes for the confirm dialog.

<link href="jquery.cw.css" rel="stylesheet">

2. Load the latest jQuery library and the JavaScript file jquery.cw.js at the end of the html document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="src/js/jquery.cw.js"></script>

3. Create a new cw instance and config the confirm dialog by overriding the options & callback functions as these:

$cw({

  // title
  title: 'Dialog Title',

  // dialog content
  content: 'Confirm message',

  // or 'light'
  theme: 'dark',

  // confirm button
  okay: {
     text: 'Confirm',
     action: function() { 
       console.log('Clicked okay button'); 
     }
  },

  // cancel button
  cancel: {
     text: 'Cancel',
     action: function() { 
       console.log('Clicked cancel button'); 
     }
  }

});

This awesome jQuery plugin is developed by DimChtz. For more Advanced Usages, please check the demo page or visit the official website.