Question

我在我的MVC3应用程序中使用Modal Popup它工作正常，但只需单击链接就会打开两次。 Modal pop是从我的Home Controller的“Index”视图触发的。我在我的模态弹出窗口中调用了一个视图'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的索引视图中调用模式弹出代码，

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

Jquery Modal Popup使用ASP.Net MVC3在Single Click上打开两次

1 个答案: