glowModal jQuery Plugin

jQuery.glowModal

This plugin manages the opening, closing, resizing, and communication of modal windows.

Usage

Open a new modal window. When a url is provided, the IFRAME rendering the modal content is returned. When HTML is provided, the native element wrapping the content is returned.

$.glowModal(options)
$.glowModal(url, options)

Options

width: The width, in pixels, of the modal window.
- default: 300
height: The initial height, in pixels, of the modal window.
- default: 300
onClose: A function called with the optional close parameter when the modal window is closed.
- default: null
loadingHtmlUrl: URL of a document to prepopulate in IFRAME-based modals before the content is loaded.
- default: ''
windowWrapperCssClasses: A string array of CSS classes to apply to nested (one per array entry) DIV tags wrapping the modal window.
- default: '[]'
windowCssClasses: A string array of CSS classes to apply to nested (one per array entry) DIV tags of the modal window.
- default: '[]'
windowTitleCssClasses: A string array of CSS classes to apply to nested (one per array entry) DIV tags around the modal window's title.
- default: '[]'
windowCloseCssClasses: A string array of CSS classes to apply to nested (one per array entry) DIV tags around the modal close link.
- default: '[]'
windowContentsCssClasses: A string array of CSS classes to apply to nested (one per array entry) DIV tags around the modal window's content.
- default: '[]'
windowMaskCssClasses: A string array of CSS classes to apply to nested (one per array entry) DIV tags of the modal window mask.
- default: '[]'
windowFooterCssClasses: A string array of CSS classes to apply to nested (one per array entry) DIV tags wrapping the modal window footer.
- default: '[]'
zIndex: The z-index value for the modal window
- default: 1000
openInParentModal: When true, a modal opened from a modal will open in the parent's window. When false, the modal will open within the content of the current modal.
- default: true
url: The URL of an HTML page to render within an IFRAME in the modal. Either url or html is required.
- default: null
html: Either the HTML content or a promise that resolves to the HTML content to render within the modal. When HTML content is provided, it is rendered directly within the content of the modal (and not within an IFRAME). Either html or url are required.
- default: null
title: The title HTML to show on the modal window.
- default: null
footer: HTML to render within the footer of the modal window.
- default: null
loadingHtml: The HTML to render in the modal while a promise is resolving when a promise is defined for the html option.
- default: '<div style="font-size: 110%; color: #ccc; width: 100%; height: 100%; padding: 10px; text-align: center; vertical-align: middle; box-sizing: border-box;">Loading...</div>'
focusOnOpen: When true, the content of the modal will be focused when opened/loaded.
- default: true
animate: A function that implements the modal opening/resizing animation, returning a promise that resolves when the animation is complete.
- default: A default animation implementation

The animate function is provided with a state entity that varies based on the action value of the state entity:

When intializing a modal, the parameter will be:

{
   action: 'initialize',
   modal: *jQuery object representing the modal*,
   mask: *jQuery object representing the mask*
}

When opening a modal, the parameter will be:

{
    action: 'open',
    modal: *jQuery object representing the modal*,
    mask: *jQuery object representing the mask*,
    x: *the target x coordinate*,
    y: *the target y coordinate*,
    width: *the target width*,
    height: *the target height*
}

When resizing a modal, the parameter will be:

{
    action: 'resize',
    modal: *jQuery object representing the modal*,
    mask: *jQuery object representing the mask*,
    x: *the target x coordinate*,
    y: *the target y coordinate*,
    width: *the target width*,
    height: *the target height*,
    originalWidth: *the original width*,
    originalHeight: *the original height*,
    originalX: *the original x coordinate*,
    originalY: *the original y coordinate*
}

When closing a modal, the parameter will be:

{
    action: 'close',
    modal: *jQuery object representing the modal*,
    mask: *jQuery object representing the mask*,
    x: *the current x coordinate*,
    y: *the current y coordinate*,
    width: *the current width*,
    height: *the current height*
}

Events

glowModalOpening: triggered when a modal is opening.
glowModalOpened: triggered when a modal has completed opening.
glowModalClosing: triggered when a modal is closing.
glowModalClosed: triggered when a modal has completed closing.

Methods

close

Closes the current modal window or the modal window opened by a provided opener window context, with the provided close parameter.

$.glowModal.close('return value');
$.glowModal.close('return value', openerWindow);

refresh

Refreshes the rendering of the current modal window or the modal window opened by a provided window opener context.

$.glowModal.refresh();
$.glowModal.refresh(openerWindow);

setTitle

Sets the title HTML of the current modal window or the modal window opened by a provided window opener context.

$.glowModal.setTitle('title');
$.glowModal.setTitle('title', openerWindow);

setFooter

Sets the footer HTML of the current modal window or the modal window opened by a provided window opener context.

$.glowModal.setFooter('footer');
$.glowModal.setFooter('footer', openerWindow);

opener

Gets the window that opened the the provided modal window object (applies to IFRAME-based modals only).

var opener = $.glowModal.opener(modalWindow);
var opener = $.glowModal.opener(modalWindow, openerWindow);

visible

Returns true if a modal window is currently open, otherwise false.

var isVisible = $.glowModal.visible();
var isVisible = $.glowModal.visible(openerWindow);

Recommended