如何使我的模态弹出扩展器模态？（禁用背景）答案

【问题标题】：How can I make my Modal Popup Extender Modal? (Disable background)如何使我的模态弹出扩展器模态？（禁用背景）
【发布时间】：2009-10-13 10:39:34
【问题描述】：

我在我的 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>

【问题讨论】：

标签： asp.net ajax

【解决方案1】：

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

BackgroundCssClass="modalBackground"

这是来自example page的此类列表：

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

【讨论】：

干杯，我不明白这会如何禁用背景，但不知何故它做到了。谢谢。
不客气！他们只是用这个覆盖所有内容的 css 类添加另一个 div。

【解决方案2】：

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

}

【讨论】：

请告诉我为什么你会在两年前给出（并接受）完全相同的答案来回答问题？！

【解决方案3】：

答案不会停止在后台滚动，IMO 是真正的禁用背景。

我是用这个...

将您的 ContentPlaceHolder 包装在 <DIV id="wrapper"> 中

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

所以CSSClass="popupOK" 在您的标签或modalpopupextender 内的控件中，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');
    }
)}

【讨论】：