0

我希望出现一个对话框 div 并将其余页面显示为灰色。我应该无法单击页面上的任何其他内容。
以下是我正在使用的代码。不知何故，代码不起作用。页面只是在点击超链接时刷新。
任何人都可以帮忙吗？

<script>
    $(document).ready(function () {

                $("#DownloadButton").click(function (e) {
                    ShowDialog(true);
                    e.preventDefault();
                });

                $("#btnClose").click(function (e) {
                    HideDialog();
                    e.preventDefault();
                });

                $("#btnDownload").click(function (e) {
                    HideDialog();
                    e.preventDefault();
                });

            });

            function ShowDialog(modal) {
                $("#overlay").show();
                $("#dialog").fadeIn(310);

                if (modal) {
                    $("#overlay").unbind("click");
                }
                else {
                    $("#overlay").click(function (e) {
                        HideDialog();
                    });
                }
            }

            function HideDialog() {
                $("#overlay").hide();
                $("#dialog").fadeOut(300);
            } 

</script>




<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <div id="overlay" class="web_dialog_overlay">
        </div>
        <div id="dialog" class="web_dialog">
            <table>
                <tr>
                    <td>
                        <asp:Button ID="btnDownload" runat="server" Text="Download" />
                    </td>
                    <td>
                        <asp:Button ID="btnClose" runat="server" Text="Close" />
                    </td>
                </tr>
            </table>
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <Triggers>
                <asp:PostBackTrigger ControlID="DownloadButton" />
            </Triggers>
            <ContentTemplate>
                <div  class="BaseClass">
                    <asp:LinkButton ID="DownloadButton" runat="server">Download</asp:LinkButton>
                </div>
                <asp:GridView>
                </asp:GridView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Content>
4

3 回答 3

2

如果 DownloadButton、btnClose 和 btnDownload 是服务器控件的 ID，那么要获取客户端 ID，您必须使用：

$("#<%=DownloadButton.ClientID%>")

代替

 $("#DownloadButton")

在你的 jQuery 代码中。

或者

如果您使用的是 ASP.Net 4.0

将 ClientIDMode="static" 与您的服务器端控件一起使用。

关闭对话框：

使用链接关闭模型弹出窗口：例如。

<a href="#" id="btnClose"></a>

在你的Javascript中使用：

$("#btnClose").click(function (e) {
                    HideDialog();
                });
于 2012-06-15T11:38:02.487 回答
1

你为什么不简单地使用锚标签？它至少不会导致回发，无需使用更新面板。

<a id="DownloadButton" href="#">Download</a>

$("#DownloadButton").click(function (e) {
                ShowDialog(true);
                e.preventDefault();
            });

否则，如果您想使用服务器端控制，Kapil Khandelwal 的答案是正确的。

$("#<%=DownloadButton.ClientID%>")
于 2012-06-15T11:50:20.470 回答
1

在准备好的文件中：

        jQuery("#overlay").dialog(
            {
                bgiframe: true,
                autoOpen: false,
                modal: true,
                width: 800
            }
        );

在点击事件中：

        $('#overlay').dialog('open');

我敢肯定，您必须在对话框声明中指定更多选项，但这种方法对我来说效果很好。

于 2012-06-15T12:43:52.997 回答