我在我的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>
答案 0 :(得分:4)
你应该在“modalBackground”css类中编写一个合适的样式。您的代码中已经设置了适当的属性:
BackgroundCssClass="modalBackground"
以下是来自example page的此类的列表:
.modalBackground
{
background-color:Gray;
opacity:0.7;
}
答案 1 :(得分:0)
.modalBackground
{
background-color:Gray ;
filter:alpha(opacity=30);
}
答案 2 :(得分:0)
答案并不会停止在后台滚动,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');
}
)}