Elegant Flexible jQuery Dialog Popup Plugin - artDialog

Elegant Flexible jQuery Dialog Popup Plugin - artDialog
File Size: 124 KB
Views Total: 2335
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

artDialog is a simple, elegant, full-featured jQuery plugin to create responsive, accessible, fully customizable dialog popups for your modern web applications.

Main features:

  • Based on HTML5 Dialog API.
  • Supports both standard & modal dialog boxes.
  • Also allows popover styles.
  • ARIA supported.
  • User-friendly API.
  • Auto resize to fit any screen size.

Install it via NPM:

npm install --save-dev art.dialog
var dialog = require('art.dialog');

How to use it:

1. Add references to the jQuery artDialog plugin's JavaScript and CSS files:

<link href="css/dialog.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="dist/dialog-plus.js"></script>

2. Create a new dialog object and define your custom title & content as this:

var d = dialog({
    title: 'Welcome',
    content: 'jQuery artDialog Default Demo'

3. Show the dialog popup.


3. Show the dialog popup as a modal window on the webpage.


4. Show the dialog popup as a popover appending to a specific element.


5. All possible options to customize the dialog popup.


  // alignment
  align: 'bottom left',

  // dialog ID
  id: 'demo-1'
// fixed position fixed: false, // z-index zIndex: 1024, // background color backdropBackground: '#000', // background opacity backdropOpacity: 0.7, // dialog content content: '<span class="ui-dialog-loading">Loading..</span>', // dialog title title: '', // status bar content statusbar: '', // custon buttons button: null, // OK callback ok: null, // cancel callback cancel: null, // OK text okValue: 'ok', // cancel text cancelValue: 'cancel', // false = can not be closed cancelDisplay: true, // width/height width: '', height: '', // padding padding: '', // custom skin skin: '', // autoclose by click on the overlay quickClose: false, // custom template innerHTML: '<div i="dialog" class="ui-dialog">' + '<div class="ui-dialog-arrow-a"></div>' + '<div class="ui-dialog-arrow-b"></div>' + '<table class="ui-dialog-grid">' + '<tr>' + '<td i="header" class="ui-dialog-header">' + '<button i="close" class="ui-dialog-close">&#215;</button>' + '<div i="title" class="ui-dialog-title"></div>' + '</td>' + '</tr>' + '<tr>' + '<td i="body" class="ui-dialog-body">' + '<div i="content" class="ui-dialog-content"></div>' + '</td>' + '</tr>' + '<tr>' + '<td i="footer" class="ui-dialog-footer">' + '<div i="statusbar" class="ui-dialog-statusbar"></div>' + '<div i="button" class="ui-dialog-button"></div>' + '</td>' + '</tr>' + '</table>' + '</div>' })

6. Callback functions.

  onshow: function(){},
  onbeforeremove: function(){},
  onremove: function(){},
  onclose: function(){},
  onfocus: function(){},
  onblur: function(){},
  onreset: function(){},

7. API methods.

// show the dialog

// show the modal

// close the dialog

// remove the dialog

// set the content

// set the title

// set the width

// set the height

// reset the dialog

// set the buttons

// set the focus

// set the blur

// custom event handler
d.addEventListener(type, callback)

// remove the event handler
d.removeEventListener(type, callback)

// get the ID

// get the current dialog

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