AjaxControlLibrary

So it takes a little dicking around to do it, but you can use the DropShadowExtender with the ModalPopupExtender.

I had a little problem getting it to work some time ago, then when I noticed the DropShadow attribute on the popup class I thought that there must have been a problem with using them together so I just used the internal drop shadow. Well, after finding a couple of other issues with the DropShadow attribute, and finding no way to specify opacity or rounded corners, I went back to trying the two extenders together. The solution makes sense in the end I guess. You just need to put the drop shadow on an element inside the one that has the popup, not on the same panel.

An example should be fairly clear:

<asp:Panel ID="pExecuteProgress" runat="server" style="display:none;">

    <asp:Panel ID="pExecuteProgressContent" runat="server" CssClass="ExecuteProgress">

        <div>Processing...</div>

        <div><img alt="..." src="images/status_anim.gif" /></div>

    </asp:Panel>

    <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="pExecuteProgressContent" TrackPosition="true" Opacity="0.3" Width="8" />

</asp:Panel>

<cc1:ModalPopupExtender ID="mpeExecuteProgress" runat="server" PopupControlID="pExecuteProgress" TargetControlID="pExecuteProgress" BehaviorID="ExecuteProgress" BackgroundCssClass="ModalBackground">

</cc1:ModalPopupExtender>

A couple of notes about this example:

• I have specified the same control for the TargetControlID - it has to be non null, but I am showing this popup only via JS
• The display:none on the outer panel is to prevent the flashing of the control on page load that you can sometimes get

Just for interest sake, here are the two css classes mentioned:

.ExecuteProgress {

  border: 1px solid #000000;

  background-color: #FFFFFF;

  padding: 30px 80px 30px 80px;

  font-family: Arial;

  font-size: large;

  color: #3366FF;

}

.ModalBackground {

  background-color: #C0C0C0;

  filter: alpha(opacity=70);

  opacity: 0.7;

}

I gotta find a better way to post code... I just used an online encoder to HTMLEncode the text, then it is just in a <pre> *sigh*

[Edit] Code posting fixed.