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
   
jQuery UI Based Native JS Dialogs Replacement - Enhanced Alert

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.