All docs
V20.2
24.1
23.2
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.

jQuery Popup - Color the Shading of the Background

When the Popup is shown, the area beneath it can be shaded. To enable this behavior, assign true to the shading property. The shading color is specified by the shadingColor property.

jQuery
HTML
JavaScript
<div id="popupContainer">
    <p>Popup content</p>
</div>
$(function() {
    $("#popupContainer").dxPopup({
        title: "Popup Title",
        visible: true,
        shading: true,
        shadingColor: "rgba(0, 0, 0, 0.2)"
    });
});
Angular
HTML
TypeScript
<dx-popup
    title="Popup Title"
    [(visible)]="isPopupVisible"
    [shading]="true"
    shadingColor="rgba(0, 0, 0, 0.2)">
</dx-popup>
import { DxPopupModule } from "devextreme-angular";
// ...
export class AppComponent {
    isPopupVisible: boolean = true;
}
@NgModule({
    imports: [
        // ...
        DxPopupModule
    ],
    // ...
})
Vue
<template>
    <DxPopup
        v-model:visible="isPopupVisible"
        title="Popup Title"
        :shading="true"
        shading-color="rgba(0, 0, 0, 0.2)">
        <template>
            <p>Popup content</p>
        </template>
    </DxPopup>
</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
    },
    data() {
        return {
            isPopupVisible: true
        };
    }
}
</script>
React
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 renderContent = () => {
    return (
        <p>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 (
            <Popup
                visible={this.state.isPopupVisible}
                title="Popup Title"
                shading={true}
                shadingColor="rgba(0, 0, 0, 0.2)"
                contentRender={renderContent}
                onHiding={this.onHiding}
            />
        );
    }
}

export default App;

Note that the default shading color is transparent.

See Also