Pretty Alert/Success/Confirm Dialog Plugin - Notify Mobile

File Size: 4.53 KB
Views Total: 2784
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Pretty Alert/Success/Confirm Dialog Plugin - Notify Mobile

Notify Mobile is a jQuery popup box plugin to help developers create mobile-friendly, pretty clean alert, success, confirmation dialog boxes on the web application.

See also:

How to use it:

1. Load the Notify Mobile plugin's files notify.css and notify.js in the document. Note that the script must load after the latest jQuery JavaScript library.

<link rel="stylesheet" href="/path/to/notify.css" />
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/notify.js"></script>

2. Load the latest Font Awesome Iconic Font for the dialog icons (OPTIONAL).

<link rel="stylesheet" href="/path/to/fontawesome/all.css" />

3. Create alert & success dialog boxes with titles.

Notify.alert('Alert Title');
Notify.suc('Success Title');

4. Create alert, success, confirm dialog boxes with titles and messages.

Notify.alert({
  title : 'Alert Title',
  text : 'Alert Message here'
});

Notify.suc({
  title : 'Success Title',
  text : 'Success Message here'
});

Notify.confirm({
  title : 'Confirm title',
  text : 'Are you sure?'
});

5. HTML content is supported as well.

Notify.alert({
  title : 'Alert Title',
  html : '<b>Alert</b> Message here'
});

Notify.suc({
  title : 'Success Title',
  html : '<b>Success</b> Message here'
});

Notify.confirm({
  title : 'Confirm title',
  html : '<b>Are you sure?</b>'
});

6. Execute callback functions when you click on the Ok/Cancel button.

Notify.confirm({
  title : 'Confirm title',
  html : '<b>Are you sure?</b>',
  ok : function(){
    Notify.suc('OK');
  },
  cancel : function(){
    Notify.alert('cancel');
  }
});

7. Override the default dialog icons in the JavaScript (line 95 - line 101).

if (param.type == 'alert') {
  $('h3', this.$window).prepend($('<i class="fas fa-exclamation-circle" aria-hidden="true">'));
} else if (param.type == 'confirm') {
  $('h3', this.$window).prepend($('<i class="fas fa-question-circle" aria-hidden="true">'));
} if (param.type == 'success') {
  $('h3', this.$window).prepend($('<i class="fas fa-check" aria-hidden="true">'));
}

This awesome jQuery plugin is developed by k3179. For more Advanced Usages, please check the demo page or visit the official website.