Versatile Dialog Box & Notification Popup Plugin - jquery.dialog.js

File Size: 22.7 KB
Views Total: 983
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Versatile Dialog Box & Notification Popup Plugin - jquery.dialog.js

A powerful, flexible, and customizable jQuery plugin used for displaying alert/confirm/prompt dialog boxes and info/warning/success/info notification popups on your web application.

How to use it:

1. Insert jQuery JavaScript library and the dialog plugin's files into the web page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.dialog.js"></script>
<link rel="stylesheet" href="dialog.css">

2. Create a basic dialog box.

$.dialog({
  content: ''Any HTML Content Here'
});

3. Create notification messages. Possible parameters:

  • message: Notification message to display.
  • timeout: Auto dismisses the notification after this timeout. Set to false to disable.
  • callback: Performs a function after the notification is closed.
$.sendMsg('Notification Message', 3000, function(){
  alert('close')
});

// or
$.sendSuccess('Success Message', 3000, function(){
  alert('close')
});

$.sendWarning('Warning Message', 3000, function(){
  alert('close')
});

$.sendError('Error Message', 3000, function(){
  alert('close')
});

$.sendSuccessToTop('Sticky Success Message', 3000, function(){
  alert('close')
});

$.sendWarningToTop('Sticky Warning Message', 3000, function(){
  alert('close')
});

4. Create a basic confirmation dialog box.

$.sendConfirm({
  title: 'Confirm Dialog',
  msg: 'Are U Sure?',
  desc: 'Are U Sure to delete this entry?',
  button: {
    confirm: 'Okey',
    cancel: 'Cancel'
  },
  onConfirm: function() {
    console.log('Confirm');
  },
  onCancel: function() {
    console.log('Cancel');
  },
  onClose: function() {
    console.log('Close');
  }
});

5. Global settings with default values.

{
  id: '',
  title: 'Title',
  isFixed: true,
  hideHeader: false,
  hideClose: false,
  content: null,
  callback: null,
  withNoPadding: false, 
  withNoMinWidth: false,
  bgHide: true,
  escHide: true
}

6. Default options for the confirm dialog box.

{
  id: 'dialogConfirmBox',
  title: 'Confirm',
  hideHeader: false,
  hideClose: false,
  withCenter: false,
  withIcon: false,
  autoClose: false,
  timeout: 3000,
  width: null, 
  noconfirm: false,
  msg: '',
  desc: '', 
  content: '', 
  button: {
    confirm: 'Okey', // {text:'Text', href:'#', target:'_blank',behavior:'behavior'}
    cancel: 'Cancel', // {text:'Text', href:'#', target:'_blank',behavior:'behavior'}
    cancelFirst: false
  }
}

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