
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