lightbox

Display the main editing form in a lightbox.
Please note - this property requires the Editor extension for DataTables.

The full Editor reference documentation is available to registered users of Editor - the information shown below is a summary only. If you already have an Editor license please sign-in, alternatively an Editor license can be purchased on this site, or sign up for the free trial.

Description

Editor has two built in display controllers (lightbox and envelope). These display controllers provide the method for how the form is actually shown to the end user. Which option is used is controlled by the display option. This method (lightbox) is the default display controller.

The lightbox display shows the form as a layer floating on top of the rest of the page. It is static in the viewport, so the form is always visible to the end user while it is displayed (i.e. it cannot be scrolled out of the viewport). To enhance the idea of the form floating over the rest of the document, a background layer is added to create a shadow like effect, fading out the rest of the document and focusing the user's attention on the form.

The lightbox controller provides options to configure how it displays the Editor form through the properties in the object $.fn.dataTable.Editor.display.lightbox.conf. The default options are (see below for a detailed explanation of each):

{
    "offsetAni":     25,
    "windowPadding": 25
}

Setting custom values

Setting a custom value for the lightbox display controller can be done in one of two different ways. For setting a single option use:

$.fn.dataTable.Editor.display.lightbox.conf.windowPadding = 50;

To set multiple items, it is more code efficient to use the jQuery.extend() method:

$.extend( $.fn.dataTable.Editor.display.lightbox.conf, {
    offsetAni:     50,
    windowPadding: 50
} );

Options

The lightbox provides the following options:

offsetAni

When the lightbox display controller animates the main form display in, it performs two different animations - the most obvious is the opacity, but it will also transition the form down the y-axis (i.e. it moves down on the page). This is to make it look like the box is flying in to the end user. Equally, when the display is closed, the box will continue to move down the y-axis, flying out.

This option controls the distance, in pixels, that this movement along the y-axis will cover. The default value is 25 to give a subtle animation effect, but it can be enhanced by using a higher value, or disabled entirely by setting the value to 0.

windowPadding

The lightbox display used the CSS position: fixed option to ensure that the form is always visible on screen to the end user while it is displayed. As such, the form has the height of the browser window to display the form (the fields part will scroll for larger forms!), and this parameter controls the how far the lightbox edge is displayed from the edge of the window.

By default the lightbox does not touch the edge of the browser window, enhancing the look of the form floating over the page, but how far that padding distance is can be controlled by this parameter. It is an integer, with the size in pixels. 0 would indicate no padding if you want to make full use of the display area available.