jQuery Plugin For Lightbox Style Confirm Interface - confirmOn
File Size: | 122 KB |
---|---|
Views Total: | 9139 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

confirmOn is an useful jQuery plugin for creating a modal box style confirmation popup when performing important actions on your web page.
How to use it:
1. Include jQuery javascript library and jQuery confirmOn plugin on your web page
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="jquery.confirmon.js"></script>
2. The sample CSS for the confirmation popup
.confirmon-overlay { background-color: black; background-color: rgba(0, 0, 0, 0.60); width: 100%; height: 100%; margin: 0; top: 0; left: 0; position: fixed; z-index: 150; display: none; } .confirmon-box { background-color: #0099cc; color: #ddd; border: solid 1px #666666; box-shadow: 0px 1px 10px #222; padding: 20px 10px 35px 10px; text-align: center; font-weight: bold; font-size: 15px; z-index: 151; display: none; position: absolute; margin-left: -15%; width: 30%; left: 50%; top: 185px; } .confirmon-box button { margin: 10px 5px; padding: 5px 10px; text-align: center; background-color: #0099cc; border: 1px solid #ddd; color: #ddd; font-weight: bold; } .confirmon-box button:hover { background-color: #00bbee; cursor: pointer; }
3. Create a 'delete me' button. If you click no in the confirmation popup, nothing happens. If you click yes, the provided handler in .confirmOn() is called.
<button id="demo">Delete me</button>
4. The javascript.
<script> $(function() { $('#demo').confirmOn('click', function() { $(this).remove(); }); }); </script>
5. Options and defaults.
// The confirmation question questionText: 'Are you sure?', // // Use another prefix for the classes used by the plugin classPrepend: 'confirmon', // Text on the button the user clicks when the handler should be called textYes: 'Yes', // Text on the button the user clicks when the handler should not be called textNo: 'No', // Cancel the pop-up by letting this funcion return false onShow: null
Change logs:
v0.1.4 (2014-03-08)
- Added option 'onShow', depending on the return value of the passed function it cancels the pop-up
v0.1.3 (2014-01-04)
- Changed sample and version++
- Create .min.js
v0.1.2 (2013-11-20)
- ClassPrepend option is now also used for the inner elements of the pop-up
This awesome jQuery plugin is developed by invetek. For more Advanced Usages, please check the demo page or visit the official website.