Question

我有一个aspx页面，我想在IF条件下动态禁用该页面。在这里，通过单词'禁用'，我的意思是当弹出窗口或Radwindow打开并且父页面被禁用并且用户在弹出窗口之前无法对父页面执行任何操作时完全相同的条件关闭。

对于Ajax或Rad控件，我可以将控件的“模态”属性设置为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; }

动态禁用页面

2 个答案: