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>

modal popup extender problem

i use modal popup extender to show my details in another separate window it is a panel contains some controls the problem is :: when i click on my button which contains:: the Show() method the parent

How to close Modal popup Extender from Server side

How to close Modal Popup Extender from server side code on click on close link inside the popup?



Flickering between Modal Popup Extender windows (JavaScript)?

I have 3 paging AJAX Modal Popup Extender windows displaying my application’s help pages. I have this script which hides and shows the relevant modal window. Each function is fired from ‘Next’ and ‘Ba

Does modal popup extender need update panel?

Is it necessary that we shud use modal popup extender inside an update panel ?

Disable animation of the modal popup extender

How can I disable the animation effect while the ModalPopupExtender is shown? Here is my coding: HTML <script language =javascript type=text/javascript> function pageLoad() { var mpe = $fi

Can I call a modal popup extender’s (which is in one user control) show method from other user control?

I have two user controls. One is having a ModalPopupExtender which I need to show on a click of hyperlink button which is other user control. Is it possible? Can I anyhow call a modal popup extender’s

How can I know ajax modal popup is opened?

How can I know ajax modal popup is opened? Help please

Run time error in Modal popup extender

when im using modal popup extender in asp.net pages i got Microsoft JScript runtime error: ‘_popupElement.parentNode’ is null or not an object this is run time error every time. does anybody know th

Modal popup extender not displaying popup

I have inherited some code using an ASP modal popup extender and for some reason it has now decided to stop working. Am I missing anything here? I’m not too fluent with AJAX / ASP.Net right now so im

Click Events in Modal Popup Extender

I have a ASP.NET page where a modal popup extender is shown when we click on a link button…There is a submit button in the Modalpopup extender which inserts the data into a DB table…. the proble i

Answers

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;
}
.modalBackground
{
    background-color:Gray ;
    filter:alpha(opacity=30);

} 

The answer does not stop the scrolling in the background, which IMO is a true disabling of the background.

I did it using this…

Wrap your ContentPlaceHolder in a <DIV id=”wrapper”>

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

So CSSClass=”popupOK” in your label or control inside the modalpopupextender, and CSSClass=”promoVisible” in your OK or CANCEL buttons that are supposed to 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');
    }
)}