Fadeout/Darken background behind ModalPopupExtender in ASP

c# asp.net modalpopupextender
Boardy picture Boardy · Jun 15, 2011 · Viewed 19.1k times · Source

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.

Answer

Anirudh Ramanathan picture Anirudh Ramanathan · Jun 15, 2011

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.

Related questions

ASP.NET: ModalPopupExtender prevents button click event from firing

Here is what I'm trying to do: Click a button on my page, which in turn makes (2) things happen: Display a ModalPopup to prevent the user from pressing any buttons or changing values Call my code behind method, hiding the …

Read More
BackgroundCssClass not being applied with ModalpopupExtender

I am trying to create this webpage that shows a database with a "Master-Detail" type view. To do this I am following this tutorial http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html. The only difference is that I am …

Read More
How to make ModalPopup drag/drop

I use a ModalPopupExtender from the Ajax ControlToolkit in my Webapplication.I set it's Drag property is true,but when I drag the popup panel and drop it at the new position,it comes back the original position at once.…

Read More