Member Avatar for jackparsana
jackparsana 0 Junior Poster in Training

hi,


Can i change color of shadow for popup container. in C#.


i use ModalPopupExtender popup.

as bellow :

<cc1:ModalPopupExtender ID="ModalPopupExtender5" runat="server" TargetControlID="Button5"
PopupDragHandleControlID="Panel5" Enabled="true" OkControlID="lbtcanceldv" DynamicServicePath=""
PopupControlID="Panel5" DropShadow="true" s BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>

Can i change color of this shadow?

thanks in advance.

jack

Edited by jackparsana because: for more understanding
  • 1 Contributor
  • 0 Replies
  • 96 Views

Dani AI

Generated

Short answer: you cannot change the toolkit's built-in drop-shadow color directly. Use CSS instead — either style the modal background (the class you pass to BackgroundCssClass) or disable the built-in DropShadow and apply a CSS box-shadow to your popup panel so you control the color, blur and spread.

Since your extender already sets a background class, change that class to an rgba overlay (leaves popup opaque while dimming the page):

.modalBackground {
background-color: rgba(0,0,0,0.5); / overlay color + alpha /
filter: alpha(opacity=50); / IE8 fallback /
zoom: 1;
}

To control the shadow around the popup itself, turn off the extender shadow and add a box-shadow on the Panel (or whatever element is your popup). This gives precise color control:

#Panel5 {
-webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}

Notes and pitfalls: do not use the opacity property on the overlay element (it will make children semi-transparent); prefer rgba() for overlay color. Older IE needs fallbacks (filters or PNG overlays). If you prefer to keep the toolkit shadow, you would have to override the toolkit CSS/resource image shipped with the AjaxControlToolkit, which is more intrusive than the CSS approach above.

References: general CSS shadow options and syntax are documented on MDN box-shadow on MDN. The ModalPopupExtender is part of the Ajax Control Toolkit project AjaxControlToolkit on GitHub.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.