DevExtreme jQuery - Color the Shading of the Background
When the Popover 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
JavaScript
HTML
$(function() {
$("#popoverContainer").dxPopover({
target: "#image",
showEvent: 'dxhoverstart',
hideEvent: 'dxhoverend',
shading: true,
shadingColor: "rgba(0, 0, 0, 0.2)"
});
});<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
<div id="popoverContainer">
<p>Popover content</p>
</div>Angular
HTML
TypeScript
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />
<dx-popover
target="#image"
showEvent="dxhoverstart"
hideEvent="dxhoverend"
[shading]="true"
shadingColor="rgba(0, 0, 0, 0.2)">
<div *dxTemplate="let data of 'content'">
<p>Popover content</p>
</div>
</dx-popover>
import { DxPopoverModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxPopoverModule
],
// ...
})ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Popover()
.Target("#image")
.ShowEvent("dxhoverstart")
.HideEvent("dxhoverend")
.ContentTemplate(@<text>
<p>Popover content</p>
</text>)
.Shading(true)
.ShadingColor("rgba(0, 0, 0, 0.2)")
)
<img id="image" src="https://www.devexpress.com/DXR.axd?r=9999_17-FD0Id" />See Also
Feedback