JavaScript/jQuery Popup - Color the Shading of the Background

When the JavaScript 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>JavaScript Popup content</p>
</div>
$(function() {
    $("#popupContainer").dxPopup({
        title: "JavaScript Popup Title",
        visible: true,
        shading: true,
        shadingColor: "rgba(0, 0, 0, 0.2)"
    });
});
Angular
HTML
TypeScript
<dx-popup
    title="JavaScript 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="JavaScript Popup Title"
        :shading="true"
        shading-color="rgba(0, 0, 0, 0.2)">
        <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}
                title="JavaScript 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