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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.