0

我正在使用此代码显示一个对话框，该对话框将确认删除按钮，它工作正常，但是当它弹出时它不会禁用 ASP.Net 页面的任何控件，因此我可以单击任何控件或文本框，

我想做的第一件事是在 Jquery 打开我的 Div 标签框时淡出页面，然后禁用所有控件。

这是代码

Div（自定义对话框）

    <div id="divConfMessage">
        <div align="center">
            <br /><asp:Label ID="Label1"  runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br />
            <asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
            <asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br />
        </div>
</div>

脚本 (jquery)

    <script type="text/javascript" src="/_layouts/1033/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("input[id$='btDelete']").click(function() 
        {
        $("#divConfMessage").fadeIn();
        });
    });
</script>

按钮

    <td>
    <asp:Button ID="btDelete" runat="server" CssClass="gradientbutton" OnClick="btDelete_Click"
    OnClientClick="this.disabled=true;this.value='Please Wait...';" Text="Delete" Width="200px"  />
</td>

对话框的 CSS

    #divConfMessage
{
    position: absolute;
    width: 500px;
    height: 200px;
    top: 50%;
    left: 30%;
    margin-left: -150px; /* Negative half of width. */
    margin-top: -100px; /* Negative half of height. */
    border: 2px solid #000;
    DISPLAY:none;
    background-color:White;
    line-height:20px;
    text-align:center;
}

笔记

除了 CSS 之外，所有代码都在页面的 ASP 内容占位符中，我有 2 个具有不同控件的另一个内容 + 一个定义所有这些内容占位符的母版页。

<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
<%@ Page Language="C#" MasterPageFile="~/my.Master" AutoEventWireup="true" CodeBehind="c.aspx.cs" Inherits="a.b.c" Title="e"  meta:resourcekey="PageResource1"  %>
4

3 回答 3

1

设置模态=真；对于 dilogbox 有 modal 属性，您可以将其设置为 True。

尝试使用Jquery 对话框（它带有 JqueryUI 插件）。

$( "#YourDivorContainerToShowAsDialog" ).dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

编辑：如果你不想使用按钮，然后像这样使用

  $( "#YourDivorContainerToShowAsDialog" ).dialog({
                modal: true             
            });

或者如果你想使用 CSS 那么你可以试试

#YourDivorContainerToShowAsDialog 
{
position: absolute;
Z-index: withMaxValue
}
于 2012-05-04T11:02:09.920 回答
1

给出一个更高Z-index的值 #divConfMessage，然后模态 dalog 将位于一切之上。

当您添加对话框时，以这种方式将其附加到正文：

 add_block_page();
 add_modal_box();



function add_block_page(){
    var block_page = $('<div class="page"></div>');
    $(block_page).appendTo('body');
}

function add_modal_box(){
    var pop_up = $('<div id="divConfMessage"></div>');
     $(pop_up).appendTo('.page');
 }
于 2012-05-04T11:19:19.080 回答
0

使用一张透明图像淡出页面。

添加一个 outerDiv 并将图像应用到 div。

<div id="outerDiv"  style="display:none;">
<div id="divConfMessage">
        <div align="center">
            <br /><asp:Label ID="Label1"  runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br />
            <asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
            <asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br />
        </div>
</div>
</div>

用于外层的 CSS

# outerDiv
{
top:0%;
left:0%;
position:absolute;
background-image:url('../img/FloatingPanel.png');//transperant image
color:White;
z-index: 1102;
Height:100%;
width:100%;
}

为#divConfMessage 提供比outerDiv 的Z-index 更高的Z-index（即：1103）。显示btDelete的outerDiv onclick

于 2012-05-08T12:12:53.217 回答