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

ドキュメント準備中:

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

クリックイベントで：

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

ダイアログ宣言でさらにオプションを指定する必要がありますが、このアプローチは私にとってはうまく機能しています。

于 2012-06-15T12:43:52.997 に答える
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 に答える