How can I make Modal Popup Extender Modal? (Turn off background)

Question

I added an ajax simple modular 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 / reduce the rest of the page. What do I need 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 1

You must write the appropriate style in the "modalBackground" css class. The corresponding property has already been set in your code:

BackgroundCssClass="modalBackground" 

Here is a list of this class from an example page :

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

Answer 2

.modalBackground
{
    background-color:Gray ;
    filter:alpha(opacity=30);

} 

Answer 3

, IMO .

, ...

ContentPlaceHolder <DIV id="wrapper">

And using Jquery ... in your main body, use this code with CSS reference classes in your objects.

So CSSClass="popupOK"in your label or control inside the modalpopupextender and CSSClass="promoVisible"in the OK or CANCEL buttons that should remove the popup.

$(document).ready(function () {
    //had to set position:fixed to work on iPad and other mobile    
    $('.popupOk').click( function(){
      $('#wrapper').css('overflow', 'auto');
      $('#wrapper').css('position', 'inherit');
      //  alert("ok clicked");
    });
    // if the popup is visible, fix the overflow so the
    // background doesn't scroll, only the popup window
    if($('.promoVisible').is(':visible')){
      $('#wrapper').css('overflow', 'hidden');
      $('#wrapper').css('position', 'fixed');
    } else{
      $('#wrapper').css('overflow', 'auto');
      $('#wrapper').css('position', 'inherit');
    }
)}