如何制作我的Modal Popup Extender Modal？ （禁用背景）

Question

我在我的asp.net应用程序中添加了一个简单的ajax模式弹出扩展器。

它的显示和功能正常，但与ajax工具包网站上的示例不同，它不会禁用/调暗页面的其余部分。我该怎么做才能达到这个效果？

 <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

你应该在“modalBackground”css类中编写一个合适的样式。您的代码中已经设置了适当的属性：

BackgroundCssClass="modalBackground" 

以下是来自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">

中

在主体中使用Jquery ...，将此代码与对象中引用的CSS类一起使用。

在modalpopupextender中的标签或控件中CSSClass="popupOK"，以及应该删除弹出框的OK或CANCEL按钮中的CSSClass="promoVisible"。

$(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');
    }
)}