Popup: Overview | JavaScript UI

Popup Overview

The w2popup object allows you to create dialogs. A popup can be created in any of the following ways:

1. JSON structure

2. Load from an external file

If there is a file "folder/popup.html", with Then

Options

You can pass a map of following properties to the constructor of the popup (none of them are required):

options: {
    title         : '',        // html for title - empty by default
    body          : '',        // html for body - empty by default
    buttons       : '',        // html for buttons - empty by default
    url           : null,      // url to load content from (see load method)
    actions       : {},        // object with actions (buttons on the bottom)
    width         : 500,       // width of the popup
    height        : 300,       // height of the popup
    style         : '',        // additional styles
    color         : '#000',    // color of the screen lock
    opacity       : 0.4,       // opacity of the screen lock
    speed         : 0.3,       // speed popup appears
    modal         : false,     // if modal, it cannot be closed by clicking on the screen lock
    maximized     : false,     // maximized state
    keyboard      : true,      // will close popup on ESC if not modal
    showClose     : true,      // show closed button by default
    showMax       : false,     // do not show max button by default
    transition    : null,      // no content transition by default
    multiple      : false,     // if popup already open, opens as a message
    openMaximized : false,     // opens the popup maximized
    // events
    onOpen        : null,      // event when dialog finished appearing
    onClose       : null,      // event when closed
    onMax         : null,      // event when maximized
    onMin         : null,      // event when minimized
    onToggle      : null,      // event when maximized/minimized
    onKeydown     : null       // event when keyboard button is clicked
    onMove        : null       // event when popup is moved
}

Popup Overview

1. JSON structure

2. Load from an external file

Options

User Comments