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 option. The shading color is specified by the shadingColor option.

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
    ],
    // ...
})

Note that the default shading color is transparent.

See Also