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＆amp; btnDownload是服务器控件的ID，然后获取您必须使用的客户端ID：

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

而不是

 $("#DownloadButton")

你在jQuery Code中的

。

或

如果您使用的是ASP.Net 4.0

将ClientIDMode =“static”与服务器端控件一起使用。

关闭对话框：

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

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

并在你的Javascript使用：

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

Answer 2

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

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

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

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

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

Answer 3

准备好文件：

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

点击事件中的

：

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

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

用于显示div不工作的jQuery

3 个答案: