Jquery Modal Popup 使用 ASP.Net MVC3 在单击时打开两次

Question

我在我的 MVC3 应用程序中使用 Modal Popup，它工作正常，但单击链接会打开两次。

模态弹出是从我的主控制器的“索引”视图触发的。我在模态弹出窗口中调用视图PopUp.cshtml。相应视图的相关ActionMethod“PopUp”位于我的“Home”控制器中。

代码如下：

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>

在 Home Controller 的 Index 视图中调用模态弹窗代码，

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

模态弹出窗口打开两次我做错了什么？

Answer 1

试试这个。它检查是否已经存在一个对话框，如果没有，它会创建一个。

还要确保你的点击事件没有绑定在多个地方（还要检查内部/外部元素）

<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>