动态禁用页面

Question

我有一个aspx页面，我想在IF条件下动态禁用该页面。 在这里，“禁用”这个词的意思是，当弹出窗口或Radwindow打开并且父页面被禁用时，用户无法对父页面执行任何操作，直到弹出窗口获得为止关闭。

对于Ajax或Rad控件，我可以将控件的'Modal'属性设置为true以禁用父页面。但是如何处理我所需的条件。

任何建议，将不胜感激。

Answer 1

您通过使用Javascript或JQuery添加覆盖页面的div来实现禁用效果。

var documentHeight = $(document).height(); 
$("body").append("<div style='z-index: 100; background: lightgray; opacity: 0.5; width: 100%; height: " + documentHeight + "px; position: absolute; left: 0; top: 0;'></div>"); 

需要注意的是，这不是“安全”的，如果这就是你以后在做什么（用户可以“砍”使用萤火虫或类似禁用窗格）。

Answer 2

您可以使用ModalPopupExtender，看看我的示例。我在我的所有网站中使用这个概念，并且适用于所有类型的浏览器。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ConfirmDialogUserControl.ascx.cs" 
    Inherits="GP.Solutions.UserControls.ConfirmDialogUserControl" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> 
<script type="text/javascript"> 

    var _source; 
    var _popup; 

    function ShowConfirmDialog(source, message) { 
     this._source = source; 
     this._popup = $find('mdlPopup'); 
     var displayDiv = document.getElementById('<%= ConfirmMessageDiv.ClientID %>'); 
     displayDiv.innerText = message; 
     displayDiv.textContent = message; 
     this._popup.show(); 
    } 

    function ConfirmDialogOk() { 
     this._popup.hide(); 

     __doPostBack(this._source.name, ''); 
    } 

    function ConfirmDialogCancel() { 
     this._popup.hide(); 
     this._source = null; 
     this._popup = null; 
    } 

</script> 


<asp:Panel ID="pnlModal" runat="server" CssClass="modalPopup" style="display:none;"> 
    <div class="modalHeader"> 
     <div id="DivImage" runat="server"> </div> 
     <asp:Label ID="TitleLabel" runat="server" Text="" CssClass="modalTitle"></asp:Label> 
    </div> 
    <asp:Panel ID="pnlControls" runat="server" CssClass="modalContent"> 
     <div id="ConfirmMessageDiv" runat="server"></div> 
    </asp:Panel> 
    <div class="modalControlsContainer"> 
     <asp:Button ID="btnConfirmDialogOk" runat="server" CssClass="modalButton" Text="" /> 
     <asp:Button ID="btnConfirmDialogCancel" runat="server" CssClass="modalButton" Text="" /> 
    </div> 
</asp:Panel> 
<asp:ModalPopupExtender ID="ModalPopupExtender1" behaviorid="mdlPopup" runat="server" TargetControlID="pnlModal" 
    PopupControlID="pnlModal" OkControlID="btnConfirmDialogOk" OnOkScript="ConfirmDialogOk();" CancelControlID="btnConfirmDialogCancel" 
    OnCancelScript="ConfirmDialogCancel();" DynamicServicePath="" Enabled="True" BackgroundCssClass="modalBackground" DropShadow="true"> 
</asp:ModalPopupExtender> 

下面是在这种情况下使用的CSS代码：

.modalBackground 
{ 
    background-color:Black; 
    filter:alpha(opacity=60); 
    opacity:0.6; 
} 

.modalPopup 
{ 
    background-color:White; 
    border: 1px solid green; 
    width:280px; 
    padding: 10px 10px 10px 10px; 
} 

.modalPopupFullWidth 
{ 
    background-color:White; 
    border: 1px solid green; 
    padding: 10px 10px 10px 10px; 
} 

.modalHeader 
{ 
    width:auto; 
    border: 1px solid silver; 
    height:25px; 
    background-color:#F2F2F2; 
} 

.modalTitle 
{ 
    color:Black; 
    font-size: 11px; 
    font-weight:bold; 
    position:relative; 
    left:30px; 
    top:-20px; 
} 

.modalImageInformation 
{ 
    background-image: url('information.png'); 
    background-repeat: no-repeat; 
    width:26px; 
    height:26px; 
    border: 0; 
} 

.modalImageWarning 
{ 
    background-image: url('warning.png'); 
    background-repeat: no-repeat; 
    width:26px; 
    height:26px; 
    border: 0; 
} 

.modalImageError 
{ 
    background-image: url('error.png'); 
    background-repeat: no-repeat; 
    width:26px; 
    height:26px; 
    border: 0; 
} 

.modalImageQuestion 
{ 
    background-image: url('question.png'); 
    background-repeat: no-repeat; 
    width:26px; 
    height:26px; 
} 

.modalImageSearch 
{ 
    background-image: url('search.png'); 
    background-repeat: no-repeat; 
    width:26px; 
    height:26px; 
} 


.modalContent 
{ 
    padding-top:10px; 
    padding-bottom:0px; 
} 

.modalControlsContainer 
{ 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
    padding-top:5px; 
} 

.modalButton 
{ 
    background-image: url('button-113x28.png'); 
    background-color:transparent; 
    width:113px; 
    height:28px; 
    border: 0px none transparent; 
    color: White; 
    font-size:11px; 
    cursor:pointer; 
    margin-top:10px; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
} 




.hidden { display: none; } 

.unhidden { display: block; }