JavaScript/jQuery Popup - Resize and Relocate

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

jQuery
HTML
JavaScript
<div id="popupContainer">
    <p>JavaScript Popup content</p>
</div>
$(function() {
    $("#popupContainer").dxPopup({
        title: "JavaScript Popup Title",
        visible: true,
        height: 300,
        width: 500
    });
});
Angular
HTML
TypeScript
<dx-popup
    title="JavaScript Popup Title"
    [(visible)]="isPopupVisible"
    [height]="300"
    [width]="500">
    <div *dxTemplate="let data of 'content'">
        <p>JavaScript Popup content</p>
    </div>
</dx-popup>
import { DxPopupModule } from "devextreme-angular";
// ...
export class AppComponent {
    isPopupVisible: boolean = true;
}
@NgModule({
    imports: [
        // ...
        DxPopupModule
    ],
    // ...
})
Vue
<template>
    <DxPopup
        v-model:visible="isPopupVisible"
        :height="300"
        :width="500"
        title="JavaScript Popup Title">
        <template>
            <p>JavaScript Popup content</p>
        </template>
    </DxPopup>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxPopup } from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup
    },
    data() {
        return {
            isPopupVisible: true
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { JavaScript Popup } from 'devextreme-react/popup';

const renderContent = () => {
    return (
        <p>JavaScript Popup content</p>
    );
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isPopupVisible: true
        };

        this.onHiding = this.onHiding.bind(this);
    }

    onHiding() {
        this.setState({
            isPopupVisible: false
        });
    }

    render() {
        return (
            <JavaScript Popup
                visible={this.state.isPopupVisible}
                height={300}
                width={500}
                title="JavaScript Popup Title"
                contentRender={renderContent}
                onHiding={this.onHiding}
            />
        );
    }
}

export default App;

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

jQuery
JavaScript
$(function() {
    $("#popupContainer").dxPopup({
        title: "JavaScript Popup Title",
        visible: true,
        resizeEnabled: true
    });
});
Angular
HTML
TypeScript
<dx-popup
    title="JavaScript Popup Title"
    [(visible)]="isPopupVisible"
    [resizeEnabled]="true">
</dx-popup>
import { DxPopupModule } from "devextreme-angular";
// ...
export class AppComponent {
    isPopupVisible: boolean = true;
}
@NgModule({
    imports: [
        // ...
        DxPopupModule
    ],
    // ...
})
Vue
<template>
    <DxPopup
        v-model:visible="isPopupVisible"
        :resize-enabled="true"
        title="JavaScript Popup Title"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxPopup } from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup
    },
    data() {
        return {
            isPopupVisible: true
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { JavaScript Popup } from 'devextreme-react/popup';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isPopupVisible: true
        };

        this.onHiding = this.onHiding.bind(this);
    }

    onHiding() {
        this.setState({
            isPopupVisible: false
        });
    }

    render() {
        return (
            <JavaScript Popup
                visible={this.state.isPopupVisible}
                resizeEnabled={true}
                title="JavaScript Popup Title"
            />
        );
    }
}

export default App;

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

jQuery
JavaScript
$(function() {
    $("#popupContainer").dxPopup({
        title: "JavaScript Popup Title",
        visible: true,
        position: {
            my: "left",
            at: "left",
            of: "#targetElement"
        }
    });
});
Angular
HTML
TypeScript
<dx-popup
    title="JavaScript Popup Title"
    [(visible)]="isPopupVisible">
    <dxo-position
        my="left"
        at="left"
        of="#targetElement">
    </dxo-position>
</dx-popup>
import { DxPopupModule } from "devextreme-angular";
// ...
export class AppComponent {
    isPopupVisible: boolean = true;
}
@NgModule({
    imports: [
        // ...
        DxPopupModule
    ],
    // ...
})
Vue
<template>
    <DxPopup
        v-model:visible="isPopupVisible"
        title="JavaScript Popup Title">
        <DxPosition
            my="left"
            at="left"
            of="#targetElement">
        />
    </DxPopup>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxPopup, DxPosition } from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup,
        DxPosition
    },
    data() {
        return {
            isPopupVisible: true
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { JavaScript Popup, Position } from 'devextreme-react/popup';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isPopupVisible: true
        };

        this.onHiding = this.onHiding.bind(this);
    }

    onHiding() {
        this.setState({
            isPopupVisible: false
        });
    }

    render() {
        return (
            <JavaScript Popup
                visible={this.state.isPopupVisible}
                title="JavaScript Popup Title"
                onHiding={this.onHiding}>
                <Position
                    my="left"
                    at="left"
                    of="#targetElement"
                />
            </Popup>
        );
    }
}

export default App;

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 JavaScript 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 JavaScript Popup by its title, so the title should not be hidden.

jQuery
JavaScript
$(function() {
    $("#popupContainer").dxPopup({
        title: "JavaScript Popup Title",
        visible: true,
        dragEnabled: true
    });
});
Angular
HTML
TypeScript
<dx-popup
    title="JavaScript Popup Title"
    [(visible)]="isPopupVisible"
    [dragEnabled]="true">
</dx-popup>
import { DxPopupModule } from "devextreme-angular";
// ...
export class AppComponent {
    isPopupVisible: boolean = true;
}
@NgModule({
    imports: [
        // ...
        DxPopupModule
    ],
    // ...
})
Vue
<template>
    <DxPopup
        v-model:visible="isPopupVisible"
        :drag-enabled="true"
        title="JavaScript Popup Title"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxPopup } from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup
    },
    data() {
        return {
            isPopupVisible: true
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { JavaScript Popup } from 'devextreme-react/popup';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isPopupVisible: true
        };

        this.onHiding = this.onHiding.bind(this);
    }

    onHiding() {
        this.setState({
            isPopupVisible: false
        });
    }

    render() {
        return (
            <JavaScript Popup
                visible={this.state.isPopupVisible}
                dragEnabled={true}
                title="JavaScript Popup Title"
            />
        );
    }
}

export default App;
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