0

aspx ページがあり、そのページを IF 条件で動的に無効にしたいと考えています。ここで、「無効」という言葉は、ポップアップまたは Radwindow が開いて親ページが無効になり、ポップアップが閉じられるまでユーザーが親ページに対して何もできないというまったく同じ状態を意味します。

Ajax または Rad コントロールの場合、コントロールの 'Modal' 属性を true に設定して、親ページを無効にすることができます。しかし、私の必要な条件のために何をすべきか。

任意の提案をいただければ幸いです。

4

2 に答える 2

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 などを使用して無効化ペインを「ハッキング」できます)。

于 2012-09-28T17:17:24.513 に答える
0

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; }
于 2012-09-28T17:20:22.830 に答える