Minimal Confirmation Dialog With jQuery - CW.js

Minimal Confirmation Dialog With jQuery - CW.js

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

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.

  • Publication date: 09.03.2018
  • Source