0

MVC3 アプリケーションでモーダル ポップアップを使用していますが、正常に動作しますが、リンクを 1 回クリックすると 2 回開きます。

モーダル ポップは、ホーム コントローラーの「インデックス」ビューからトリガーされます。PopUp.cshtmlモーダルポップアップでビューを呼び出しています。ActionMethodそれぞれのビューに関連する「ポップアップ」は、「ホーム」コントローラーにあります。

コードは次のとおりです。

layout.cshtml ページの Jquery コード、

<script type="text/javascript">
    $.ajaxSetup({ cache: false });

    $(document).ready(function () {
        $(".openPopup").live("click", function (e) {
            e.preventDefault();

            $("<div></div><p>")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        autoOpen: true,
                        title: $(this).attr("data-dialog-title"),
                        modal: true,
                        height: 250,
                        width: 900,
                        left: 0,
                        buttons: { "Close": function () { $(this).dialog("close"); } }
                    })
                    .load(this.href);
        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).dialog("close");
        });
    });
    </script>

「PopUp.cshtml」の cshtml コード

@{
    ViewBag.Title = "PopUp";
    Layout = null;
}

<h2>PopUp</h2>

<p>
Hello this is a Modal Pop-Up
</p>

ホームコントローラーのインデックスビューでモーダルポップアップコードを呼び出し、

<p>
   @Html.ActionLink("Click here to open modal popup", "Popup", "Home",null, new { @class = "openPopup", data_dialog_id = "popuplDialog", data_dialog_title = "PopUp" })
</p>

モーダル ポップアップが 2 回開くと、何が間違っていますか?

4

1 に答える 1

0

これを試して。すでにダイアログが存在するかどうかを確認し、ダイアログを作成します。

また、クリックイベントが複数の場所にバインドされていないことを確認してください（内側/外側の要素も確認してください）

<script type="text/javascript">
    $(function(){
        $(document).on("click",".openPopup",function (e) {
            var url = this.href;
            var dialog = $("#dialog");
            if ($("#dialog").length == 0) {
                dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
            }
            dialog.load(
                url,
                {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                function (responseText, textStatus, XMLHttpRequest) {
                    dialog.dialog({                       
                        close: function (event, ui) {                            
                            dialog.remove();
                        },
                        modal: true,
                        width: 460, resizable: false
                    });
                }
            );           
            return false;           
        });
    });
</script>
于 2012-10-22T23:07:31.247 に答える