JavaScript/jQuery Popup Options

$(function () {
    $("#popupContainer").dxPopup({
        // ...
        closeOnOutsideClick: function(e) {
            return e.target === $("#someElement").get()[0];
        }
    });
});

<template>
    <DxPopup ....
        :close-on-outside-click="closeOnOutsideClick">
    </DxPopup>
</template>

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

import DxPopup from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup
    },
    methods: {
        closeOnOutsideClick (e) {
            return e.target === document.getElementById("someElement");
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import Popup from 'devextreme-react/popup';

const closeOnOutsideClick = (e) => {
    return e.target === document.getElementById("someElement");
};

export default function App() {
    return (
        <Popup ...
            closeOnOutsideClick={closeOnOutsideClick}>
        </Popup>
    );
}

$(function(){
    $("#popupContainer").dxPopup({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<template>
    <DxPopup ...
        :element-attr="popupAttributes">
    </DxPopup>
</template>

<script>
import DxPopup from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup
    },
    data() {
        return {
            popupAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React from 'react';

import Popup from 'devextreme-react/popup';

class App extends React.Component {
    popupAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Popup ...
                elementAttr={this.popupAttributes}>
            </Popup>
        );
    }
}
export default App;

$(function() {
    $("#popupContainer").dxPopup({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<template> 
    <DxPopup ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script> 
import 'devextreme/dist/css/dx.common.css'; 
import 'devextreme/dist/css/dx.light.css'; 
import DxPopup from 'devextreme-vue/popup'; 

export default { 
    components: { 
        DxPopup
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react'; 
import 'devextreme/dist/css/dx.common.css'; 
import 'devextreme/dist/css/dx.light.css'; 

import Popup from 'devextreme-react/popup'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Popup ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

@(Html.DevExtreme().Popup()
    <!-- ... -->
    .ContentTemplate(@<text>
        <p>Popup content</p>
    </text>)
    .ToolbarItems(ti => {
        ti.Add()
            .Text("Title")
            .Location(ToolbarItemLocation.Before);
        ti.Add()
            .Widget(w => w.Button()
                .Text("Refresh")
                .OnClick("refresh"))
            .Location(ToolbarItemLocation.After);
    }
)

<script type="text/javascript">
    function refresh() { /* ... */ }
</script>

<template> 
    <DxPopup ... >
        <p>Popup content</p>
        <DxToolbarItem 
            text="Title" 
            location="before">
        </DxToolbarItem>
        <DxToolbarItem 
            widget="dxButton" 
            :options="buttonOptions" 
            location="after">
        </DxToolbarItem>
    </DxPopup>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

export default {
    components: {
        DxPopup
    },
    data() {
        return {
            buttonOptions: {
                text: 'Refresh',
                onClick: function(e) { /* ... */ }
            }
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

class App extends React.Component {
    constructor() {
        this.buttonOptions = {
            text: 'Refresh',
            onClick: function(e) { /* ... */ }
        };
    }
    render() {
        return (
            <Popup ... >
                <p>Popup Content</p>
                <ToolbarItem 
                    text="Title" 
                    location="before">
                </ToolbarItem>
                <ToolbarItem 
                    widget="dxButton" 
                    location="after" 
                    options={this.buttonOptions}>
                </ToolbarItem>
            </Popup>
        );
    }
}
export default App;