Search code examples
c#asp.netmodalpopupextender

Fadeout/Darken background behind ModalPopupExtender in ASP

I am currently working on a ModalPopupExtender in ASP.net with C#. I have the modal popup extender working fine but I was just wondering if there was a way to darken the background with some sort of animation to make the popup extender more noticeable.

Is there a form of JQuery or AJAX or something that would provide me with this sort of functionality.

Thanks for the help.

Solution

  • The CSS class you attach to the modal popup extender gives the background color.

    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="LinkButton2" PopupControlID="Panel2" BackgroundCssClass="modalBackground" OkControlID="OkButton1" OnOkScript="onOk()" CancelControlID="CancelButton1" DropShadow="true" PopupDragHandleControlID="Panel4" />

    and in my CSS, I have 

    .modalBackground 
{
    height:100%;
    background-color:#EBEBEB;
    filter:alpha(opacity=70);
    opacity:0.7;
}

    You can change the above CSS to darker shades of gray, if you want to. Else, you can experiment with the alpha & opacity properties.