0

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

模态弹出是从我的主控制器的“索引”视图触发的。我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>

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

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

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