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
- centerScreen
- height
- left
- location
- menubar
- resizable
- scrollbars
- status
- width
- windowName
- windowURL
- top
- toolbar
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
menubar
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.