You are reading the documentation for version 2.2. Magento 2.3 is the latest version available. Ensure you are reading the documentation for your version of Magento.

PopupWindow widget

The PopupWindow widget allows you to open a popup window with content from any URL.

The PopupWindow widget source is lib/web/mage/popup-window.js.

Initialize the PopupWindow widget

For information about how to initialize a widget in a JS component or .phtml template, see the Initialize JavaScript topic.

The PopupWindow widget is instantiated with:

1
2
3
4
5
6
7
8
9
10
$("#element").popupWindow({
    "windowURL": "http://example.com",
    "windowName": "Window Name",
    "width": 800,
    "height": 800,
    "left": 0,
    "top": 0,
    "resizable": 1,
    "scrollbars": 1
});

Where:

  • #element is the selector of the element which will be the PopupWindow.

The following example shows a PHTML file using the script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
    require([
        'jquery',
        'popupWindow'
    ], function ($) {
        'use strict';

        $("#element").popupWindow({
              "windowURL": "http://example.com",
              "windowName": "Window Name",
              "width": 800,
              "height": 800,
              "left": 0,
              "top": 0,
              "resizable": 1,
              "scrollbars": 1
        });
    });
</script>

Options

The PopupWindow widget has the following options:

centerBrowser

Centers the popup window over a browser window. It overrides the top and left options.

Type: Integer

Default value: 0

centerScreen

Centers the popup window over the entire screen. It overrides top and left options.

Type: Integer

Default value: 0

height

The height in pixels of the popup window.

Type: Integer

Default value: 500

left

Left position when the window appears.

Type: Integer

Default value: 0

location

Determines whether the address bar is displayed.

Type: Integer

Default value: 0

Determines whether the menu bar is displayed.

Type: Integer

Default value: 0

resizable

Allows the popup window to be resized.

Type: Integer

Default value: 0

scrollbars

Controls whether scrollbars appear on the popup window.

Type: Integer

Default value: 0

status

Controls the status bar at the bottom of the popup window.

Type: Integer

Default value: 0

width

The width in pixels of the popup window.

Type: Integer

Default value: 500

windowName

Name of the popup window. By default, it is set from the name attribute of the element that invokes the click.

Type: String, Null

Default value: null

windowURL

The URL which is used for the popup window.

Type: String, Null

Default value: null

top

Top position when the window appears.

Type: Integer

Default value: 0

toolbar

Determines whether the toolbar is displayed.

Type: Integer

Default value: 0

Code sample

This example shows the Open Customer Login link, and after clicking on this link the popup window is opened with Customer Login page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a href="#" class="action" title="Open Customer Login"
   data-mage-init='{"popupWindow": {
        "windowURL": "/customer/account/login",
        "windowName": "customer-login",
        "width": 400,
        "height": 400,
        "left": 0,
        "top": 0,
        "resizable": 1,
        "scrollbars": 1,
        "status": 1,
        "menubar": 1
    }}'>
    <span>Open Customer Login</span>
</a>

Result

As a result, we see the Open Customer Login link and after clicking on it, the Customer Login page is opened in the popup.

PopupWindow Example