Popup: Overlays | JavaScript UI

Overlays

An overlay is a popup within the page. Technically, it is not part of the w2popup object. It is part of w2utils. However, it is described here due to its functional similarity to popups. Tags and overlays are common purpose jQuery plugins and should be called in jQuery plugin syntax.

$().w2tag(html, [options])

The plugin will display a tag on the right from specified element.

xxxxxxxxxx
 
<input id="input-tag">
<script>
    $("#input-tag").w2tag('Automatic tag. It can hold any HTML and be quite long', {
        auto: true,
        maxWidth: 200,
        position: 'top|bottom',
        className: 'w2ui-light'
    })
</script>
​

Preview

Hover over this field

There can be many tags on the screen at the same time. If the element is moved, the tag will move with it. If it is destroyed, the tag will be destroyed. If you need to hide a tag, call w2tag again with empty text.

Options can be one of the following:

options: {
    id              : null,     // id for the tag, otherwise input id is used
    auto            : null,     // if  true, then tag will show on mouseEnter and hide on mouseLeave
    html            : text,     // or html
    position        : 'right',  // can be left, right, top, bottom
    align           : 'none',   // can be none, left, right (only works for position: top | bottom)
    left            : 0,        // delta for left coordinate
    top             : 0,        // delta for top coordinate
    maxWidth        : null,     // max width to grow
    style           : '',       // addition style for the tag
    css             : {},       // add css for input when tag is shown
    className       : '',       // add class bubble - 'w2ui-light' for light color tag
    inputClass      : '',       // add class for input when tag is shown
    hideOnKeyPress  : true,     // hide tag if key pressed
    hideOnFocus     : false,    // hide tag on focus
    hideOnBlur      : false,    // hide tag on blur
    hideOnClick     : false,    // hide tag on document click
    hideOnChange    : true,     // hide if input changed
    showOn     : 'mouseeneter', // show tag on
    hideOn     : 'mouseleave',  // hide tag on
    onShow     : null,          // callBack when shown
    onHide     : null           // callBack when hidden
}

xxxxxxxxxx
 
options: {
    id              : null,     // id for the tag, otherwise input id is used
    auto            : null,     // if  true, then tag will show on mouseEnter and hide on mouseLeave
    html            : text,     // or html
    position        : 'right',  // can be left, right, top, bottom
    align           : 'none',   // can be none, left, right (only works for position: top | bottom)
    left            : 0,        // delta for left coordinate
    top             : 0,        // delta for top coordinate
    maxWidth        : null,     // max width to grow
    style           : '',       // addition style for the tag
    css             : {},       // add css for input when tag is shown
    className       : '',       // add class bubble - 'w2ui-light' for light color tag
    inputClass      : '',       // add class for input when tag is shown
    hideOnKeyPress  : true,     // hide tag if key pressed
    hideOnFocus     : false,    // hide tag on focus
    hideOnBlur      : false,    // hide tag on blur
    hideOnClick     : false,    // hide tag on document click
    hideOnChange    : true,     // hide if input changed
    showOn     : 'mouseeneter', // show tag on
    hideOn     : 'mouseleave',  // hide tag on
    onShow     : null,          // callBack when shown
    onHide     : null           // callBack when hidden
}
​

$().w2overlay(options)

The plugin will display an overlay under (or above) the element. If element is by the edge of the screen, the overlay will be displayed in the visible portion of the page.

xxxxxxxxxx
 
let html = `
    <div style="padding: 10px; line-height: 1.5">
        This is an overlay.<br>Can be multi line HTML.
    </div>`
$('#input-overlay').w2overlay({ html, align: 'both' })
​

Preview

Click on this field

If first argument is a string, it will be treated as HTML to display. However, the first argument can be an object with options. If user clicks anywhere else on the screen the overlay will be hidden, which is not the same with tags. Normally, you can have only one overlay on the screen, however, you can provide a unique name if you want to display multiple overlays at the same time. Overlay supports following options:

options: {
    name          : null,      // it not null, then allows multiple concurrent overlays
    html          : '',        // html text to display
    align         : 'none',    // can be none, left, right, both
    left          : 0,         // offset left
    top           : 0,         // offset top
    tipLeft       : 30,        // tip offset left
    noTip         : false,     // if true - no tip will be displayed
    selectable    : false,     // if text is selectable inside the overlay
    width         : 0,         // fixed width
    height        : 0,         // fixed height
    maxWidth      : null,      // max width if any
    maxHeight     : null,      // max height if any
    contextMenu   : false,     // if true, it will be opened at mouse position
    pageX         : null,      // pageX from event.pageX object (for contextMenu)
    pageY         : null,      // pageY from event.pageY object (for contextMenu)
    originalEvent : null,      // original event (instead of pageX and pageY)
    style         : '',        // additional style for main div
    class         : '',        // additional class name for main div
    overlayStyle  : '',        // css style of entire overlay
    onShow        : null,      // event on show
    onHide        : null,      // event on hide
    openAbove     : false,     // show above control
    tmp           : {}
}

xxxxxxxxxx
 
options: {
    name          : null,      // it not null, then allows multiple concurrent overlays
    html          : '',        // html text to display
    align         : 'none',    // can be none, left, right, both
    left          : 0,         // offset left
    top           : 0,         // offset top
    tipLeft       : 30,        // tip offset left
    noTip         : false,     // if true - no tip will be displayed
    selectable    : false,     // if text is selectable inside the overlay
    width         : 0,         // fixed width
    height        : 0,         // fixed height
    maxWidth      : null,      // max width if any
    maxHeight     : null,      // max height if any
    contextMenu   : false,     // if true, it will be opened at mouse position
    pageX         : null,      // pageX from event.pageX object (for contextMenu)
    pageY         : null,      // pageY from event.pageY object (for contextMenu)
    originalEvent : null,      // original event (instead of pageX and pageY)
    style         : '',        // additional style for main div
    class         : '',        // additional class name for main div
    overlayStyle  : '',        // css style of entire overlay
    onShow        : null,      // event on show
    onHide        : null,      // event on hide
    openAbove     : false,     // show above control
    tmp           : {}
}
​

$().w2menu(menu, options)

Displays popup menu For example:

xxxxxxxxxx
 
$('#id').w2menu({
    items: [
        { id: 1, text: 'Item 1', icon: 'icon-page' },
        { id: 2, text: 'Item 2', icon: 'icon-page' },
        { id: 3, text: 'Item 3', icon: 'icon-page' },
    ],
    align: 'both',
    onSelect(event) {
        $('#input-menu').val(event.item.text)
    }
})
​

Preview

Click on this field

You can use any valid overlay option for the w2memnu as well. In addition it has following options:

xxxxxxxxxx
 
{
    type         : 'normal',    // can be normal, radio, check
    index        : null,        // current selected
    items        : [],          // menu items
    render       : null,        // custom renderer
    msgNoItems   : 'No items found',
    hideOnSelect : true,        // hide menu when item selected
    hideOnRemove : false,       // hide menu if item removed
    onSelect     : null,        // select event
    onRemove     : null         // remove event
}
​

Items is an array of objects

xxxxxxxxxx
 
item: {
    id       : null,
    text     : '',
    style    : '',
    img      : '',
    icon     : '',
    count    : '',
    tooltip  : '',
    hidden   : false,
    checked  : null,
    disabled : false
    ...
}
​

$().w2color(options, callBack)

Displays color picker menu for the element. It is used in w2toolbar for color and text-color menus. For example:

xxxxxxxxxx
 
$('#id').w2color({
    color: $(this).val(),
    transparent: true,
    html: 'Custom Colors',
    onSelect(color) {
        $('#input-color')
            .val(color)
            .w2overlay() // hide
    }
})
​

Preview

Click on this field

You can use any valid overlay option for the color as well. In addition it has following options:

xxxxxxxxxx
 
options: {
    color: '#000000',    // default color to display
    transparent: true,   // boolean, if true will show transparent color selection
    html: '',            // additional HTML at the bottom of dialog
    onSelect: function,  // func, called when color is selected
}
​

Overlays

$().w2tag(html, [options])

Preview

$().w2overlay(options)

Preview

$().w2menu(menu, options)

Preview

$().w2color(options, callBack)

Preview

User Comments