NibblyPig NibblyPig - 1 month ago 15
Ajax Question

How can I make my Modal Popup Extender Modal? (Disable background)

I added a simple ajax modal popup extender to my asp.net application.

It appears and functions correctly, however unlike the sample on the ajax toolkit website, it does not disable/dim the rest of the page. What do I have to do to achieve this effect?

<asp:Button ID="btnSaveAndClose" runat="server" Text="Save"
onclick="btnSaveAndClose_Click"/>

<cc1:ModalPopupExtender
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="btnOk"
CancelControlID="btnOk"
runat="server"
PopupControlID="pnlClientSaved"
id="ModalPopupExtender1"
TargetControlID="btnSaveAndClose"
/>

<asp:Panel ID="pnlClientSaved" runat="server" CssClass="modalPopup" style="display:none;" Width="300px" Height="200px">
Client Saved!
<br /><br />
<asp:Button ID="btnOk" runat="server" Text="Ok" />
</asp:Panel>

Answer

You should write an appropriate style in "modalBackground" css class. Appropriate property was already set in you code:

BackgroundCssClass="modalBackground"

Here is listing of this class from example page:

.modalBackground 
{
    background-color:Gray;
    opacity:0.7;
}