Minimal Confirmation Dialog Plugin For jQuery - alertBox
File Size: | 5.86 KB |
---|---|
Views Total: | 2080 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
alertBox is a lightweight and configurable jQuery confirmation dialog plugin used to confirm an action on click of an element.
How to use it:
1. Load the style sheet alertBox.css
in the head
, and the JavaScript alertBox.js
after jQuery JavaScript library.
<link href="alertBox.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src="alertBox.js"></script>
2. Attach the confirm dialog to a specific element.
<input id="btn" type="button" value="Clicm Me">
$('#btn').on('click', function () { $('body').alertBox({ title: 'Confirmation Dialog', lTxt: 'Cancel', lCallback: function(){ alert('You just clicked Cancel button.'); }, rTxt: 'Confirm', rCallback: function(){ alert('You just clicked Confirm button.'); } }) })
3. All default options to customize the confirmation dialog.
- zIndex: z-index property
- title: dialog title
- lTxt: text for left button
- lBgColor: background color of left button
- lFontColor: text color of left button
- lCallback: callback function
- rTxt: text for right button
- rBgColor: background color of right button
- rFontColor: text color of right button
- rCallback: callback function
$('body').alertBox({ zIndex: 99999, title: '', lTxt: '', lBgColor: "#D4D4D4", lFontColor: "#333", lCallback: function(){}, rTxt: '', rBgColor: "#ED6465", rFontColor: "#fff", rCallback: function(){} })
This awesome jQuery plugin is developed by JiangDing1990. For more Advanced Usages, please check the demo page or visit the official website.