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.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 { 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
Feedback