javascript - jQuery 显示 div 不起作用

Question

我希望出现一个对话框 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>

Answer 1

如果 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();
                });