All docs
V21.1
24.2
The page you are viewing does not exist in version 24.2.
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

JavaScript/jQuery Popup - Resize and Relocate

To change the size of the Popup, specify the height and width properties.

HTML
JavaScript
  • <div id="popupContainer">
  • <p>Popup content</p>
  • </div>
  • $(function() {
  • $("#popupContainer").dxPopup({
  • title: "Popup Title",
  • visible: true,
  • height: 300,
  • width: 500
  • });
  • });

To allow an end user to resize the Popup, assign true to the resizeEnabled property.

JavaScript
  • $(function() {
  • $("#popupContainer").dxPopup({
  • title: "Popup Title",
  • visible: true,
  • resizeEnabled: true
  • });
  • });

If you need to position the Popup against a specific element on your page, set the position property.

JavaScript
  • $(function() {
  • $("#popupContainer").dxPopup({
  • title: "Popup Title",
  • visible: true,
  • position: {
  • my: "left",
  • at: "left",
  • of: "#targetElement"
  • }
  • });
  • });

This configuration of the position property reads as follows: "place my left side at the left side of the "#targetElement".

By default, an end user is allowed to change the Popup position only on desktops. To enable this feature on other devices too, set the dragEnabled property to true. Note that the user drags the Popup by its title, so the title should not be hidden.

JavaScript
  • $(function() {
  • $("#popupContainer").dxPopup({
  • title: "Popup Title",
  • visible: true,
  • dragEnabled: true
  • });
  • });
NOTE
Dragging is possible only if the "height: 100%" style is applied to the <html> element and "min-height: 100%" - to the <body> element.
See Also