Dialog.js - jQuery plugin to create modal dialogs and forms.

Download   Demo

Dialog.js is a jQuery plugin to create modal dialogs and forms such as alert, confirm, contact us, and login.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="dialog.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="dialog.js"></script>

2. HTML

<button id="simple-alert" class="btn btn-default">Alert</button>
<div class="dialog">
 <h1>Site Title</h1>
 <div class="msg"></div>
 <div class="form-group toolbar">
 <button class="btn btn-primary cancel" type="submit">OK</button>
 </div>
</div>

3. JAVASCRIPT

$(document).ready(function () 
 $("#simple-alert").click(function (event) 
 event.stopPropagation();
 $.dialog.alert("Hello World");
 );
);

4. METHOD SYNTAX

$.dialog.open(name)

name

String. Name of template file to open.

$.dialog.close(name)

name

String. Name of template file to close.

$.dialog.alert(msg)

msg

String. Message to display.

$.dialog.confirm(msg[,options])

msg

String. Message to display.

options

Object.

 ok: "OK",
 cancel: "Cancel",
 option: ""

• ok – String. Text of OK button.


• cancel – String. Text of Cancel button.


• option – String. Text of optional button. If defined the option button goes to the left of the Cancel button. The text of the button is returned in the onClose method if clicked.

$.set(settings)

settings

Object.

 path: "",
 extension: ".html",
 replace: true,
 blocker: '<div class="blocker fade"></div>',
 confirm: 
 option_btn_start: '<button class="btn btn-default option" type="button">',
 option_btn_end: '</button>',
 option_btn_class: 'option'
 

• path - String. Path to dialog template files. This is prepended before the name of the dialog.
  

  I leave this blank because our site is in multiple languages. This allows me to have a translation of each dialog because the page translations are in sub-folders off the root folder. For folder names we use a combination of a 2 digit language code and 2 digit country code, esmx for Mexico, esesfor Spain, zhcn for china, …

  
  

  Leaving this blank will cause the dialog template file to be retrieved from the current path.



• extension - String. Extension of template file. This is added after the name of the dialog.


• replace - Boolean. If true replace the contents of the dialog each time it is displayed. If false, retain the contents of the dialog.


• blocker - String. Template of blocker element that contains the dialog.


• confirm - Object.
  
  • option_btn_start – String. Template of option button. Used when you want 3 buttons on a confirm dialog. This will be the third button on the left.
  
  
  • option_btn_end – String. Template of the end of the option button element.
  
  
  • option_btn_class – String. Used to search for the option button to add or remove click behavior. Also used to remove the button if replace is set to false.
  
  

5. PROMISE METHOD

.onOpen(function(element))

When the dialog opens, the passed function is called with the blocker element as the argument.

.onClose(function(element))

When the dialog closes, the passed function is called with the blocker element as the argument.

.onClose(function(boolean or text of optional button))

Confirm only. When the confirm dialog is closed, the passed function is called with a boolean or string argument denoting the button the user clicked.

• True if the user clicked the OK button.


• False if the user clicked the Cancel button.


• The text of the option button if the user clicked the option button.

.autoClose(msecs)

msecs

Number. Milliseconds to wait before closing the dialog.

By default the dialog will stay open until the user clicks the button. This can be used to open a dialog, like an alert that doesn’t require interaction from the user. Display the dialog long enough for the user to read it and then the dialog will automatically close. If the user reads faster than the time allotted for reading the dialog, the user can close the dialog before it is automatically closed by clicking the dialog button.

If used with the .confirm method, the onClose promise will pass false as its argument when the dialog automatically closes.

Dialog.js - jQuery plugin to create modal dialogs and forms.