Mutlpurpose jQuery Modal Dialog Plugin - mgDialog

mgDialog is a simple, flexible jQuery plugin that helps you create multipurpose, highly customizable modal windows, dialog boxes and toast notifications.

Key features:

• Responsive and mobile-friendly.
• Custom titles, buttons and background overlays.
• Supports both 'fixed' and 'absolute' positions.
• Custom events.
• Keyboard supported: Esc or enter keys to close the modal & dialog.
• Drag and drop without jQuery UI.
• Entrance / exit animations.
• Countdown timer supported.
• Supports alert, confirm, prompt, toast.
• Auto re-position on window resize.
• Check out the document & demo page for more details.

How to use it:

1. To get started, you have to include jQuery library and the jQuery mgDialog plugin's files on the webpage as follows:

<script src="//code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="mgDialog.css">
<script src="mgDialog.js"></script>

2. Create a simple modal-style dialog box with default global options.

var myDialog = $.dialog({
    hasMask     : true, 
    hasTitle    : true,
    hasCross    : true, 
    hotKeys     : true, 
    drag      : true, 
    fixed     : false,
    autoFocus   : true, 
    autoDestroy   : false, 
    autoReset   : false, 
    buttonsAlign  : 'right', 
    titleAlign    : 'left', 
    contentAlign  : 'left', 
    title       : 'Title', 
    content     : '', 
    buttons     : [],  
    top       : null, 
    left      : null,  
    bottom      : null, 
    right       : null, 
    width       : 0,  
    height      : 0,  
    gap       : 10,   
    countdown     : 0,       
    enterCall   : 'confirm,close',  
    escCall     : 'cancel,close',
    countdownCall : 'close',     
    onClose     : null,   
    onOpen      : null,  
    onConfirm   : null,  
    onCancel    : null
});

myDialog.open()

3. Create a confirmation dialog box with default options.

var myDialog =  $.confirm({
    title : title,
    content : text,
    width : 270,
    autoDestroy : true,
    buttons : [
      {type : 'cancel'},
      {type : 'confirm'}
    ],
    onConfirm : function(){
      fn(true);
    },
    onCancel : function(){
      fn(false);
    }

});

myDialog.open()

4. Create a prompt dialog with default options.

var myDialog =  $.prompt({
    title : title,
    content : text + '<br><input class="mgDialog_promptInput" type="text" value=""/>',
    width : 270,
    autoDestroy : true,
    buttons : [
      {
        type : 'cancel',
        call : 'close'
      },
      {
        type : 'confirm',
        call : 'confirm'
      }
    ],
    onOpen : function(){
      $document.on('keyup',submit);
    },
    onConfirm : function(){
      typeof fn === 'function' && fn(input.val());
      d.close();
    },
    onClose : function(){
      input = null;
      $document.off('keyup',submit)
    }

});

myDialog.open()

5. Create an alert dialog with default options.

var myDialog =  $.alert({
    title : title,
    content : text,
    width : 270,
    autoDestroy : true,
    buttons : [{type : 'confirm'}]
});

myDialog.open()

6. Create a toast notification with default options.

var myDialog =  $.alert({
    hasTitle : false,
    contentAlign : 'center',
    hasCross : false,
    content : text || 'toast',
    width : width || 'auto',
    autoDestroy : true,
    autoFocus : false,
    countdown : 3,
    hasMask : false,
    hotKeys : false,
    fixed : true,
    bottom : 100
});

myDialog.open()

---

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