c# - 动态禁用页面

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>");

需要注意的是，这不是“安全的”，如果那是您所追求的（用户可以使用 Firebug 或类似工具“破解”禁用窗格）。

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; }