Lock/unlock a container, DIV or entire page (by showing an overlay over it)

Description

Lock a container, DIV or entire page by showing an overlay over it so that the user can't click on the controls under the overlay, or unlock the element.

Used with the Grid and UX components.

Javascript placed in 'OnPush' attribute 

var ele = $('');
AUI.LockUI.element(ele,'{grid.style}UILock');

Lock/Unlock Element Properties 

Lock/Unlock type

Specify if you want to lock/unlock the entire page, or just an element (Container or arbitrary DIV). Choices include Page, Element.

Mode

Specify if you want to lock an element, or unlock a previously locked element. Choices include Lock, Unlock.

Automatically unlock after duration

Specify if the element should be automatically unlocked after a specified number of milliseconds. Enter 0 to never automatically unlock the element. For example, enter 1000 to automatically unlock after 1 second.

Lock class

Specify the CSS class for the overlay that is used to lock the specified object.

Object type

Specify if the object you want to lock/unlock or is a Container control, or an arbitrary DIV. Choices include Container, DIV.

DIV ID

Specify the ID of the DIV.

Container ID

Specify the ID of the container. Choices include.

Videos 

Using Action Javascript to Lock the Page or a Portion of the Page During an Ajax Callback

A common requirement in Ajax applications is to 'lock' the screen, or a portion of the screen, for the duration of the callback. This prevents the user from performing some action that is not appropriate during a callback. A transparent overlay is displayed over the screen or element to 'lock' it.

In this video we show how you can use Action Javascript to lock either the entire screen, or a portion of the screen.

This technique can be used in both the Grid and UX Component.

See Also