jQuery UI Based Native JS Dialogs Replacement - Enhanced Alert
File Size: | 13.6 KB |
---|---|
Views Total: | 1083 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Enhanced Alert is a jQuery plugin for replacing the native Javascript alert, prompt and confirm boxes using jQuery UI dialog component, with support for custom info/error icons.
How to use it:
1. Load jQuery library, jQuery UI framework and a jQuery UI theme in your web page.
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
2. Load the jQuery Enhanced Alert plugin after jQuery library.
<script src="path/to/ui.enhanced-alert.js"></script>
3. Create an alert dialog box.
// $.ea.alert(message,title,icon) $.ea.alert("My message",'Warning');
4. Create a confirm dialog box.
// $.ea.confirm(message, title, callback, icon) $.ea.confirm('Are your over 18', 'Confirm please', function(r) { $.ea.alert(r) })
5. Create a prompt dialog box.
// $.ea.prompt(message, title, callback, icon) $.ea.prompt('Where are your from ?', 'Answer please', function(r) { if (r) { $.ea.alert('I love ' + r + '!') } })
6. Custom the icons in your CSS.
.ea { height: 32px; width: 32px; float: left; } .ea.alert { background: url(path/to/alert.png); } .ea.info { background: url(path/to/info.png); }
This awesome jQuery plugin is developed by nh314. For more Advanced Usages, please check the demo page or visit the official website.