jQuery 模态对话框多次打开答案

【问题标题】：jQuery modal dialog opens multiple timesjQuery 模态对话框多次打开
【发布时间】：2014-06-30 14:20:54
【问题描述】：

你能帮我理解为什么我的 javascript 函数会多次打开模式弹出窗口吗？因此，如果我在第一次出现模式时单击该链接，然后我将其关闭并再次打开 - 如果我想关闭它，我应该按两次取消等。

这是我的代码：

<script type="text/javascript">
  $(function () {

      $('.modal-class').click(function () {
          $("#modal-popup").load(this.href, function () {
              var target = document.getElementsByClassName("modal-popup")
              $(target).dialog({
                  autoOpen: true,
                  closeOnEscape: true,
                  width: 400,
                  resizable: false,
                  title: 'Login Form',
                  modal: true,
                  buttons: {
                      Login: function() {
                      // perform login
                $.post("@Url.Action("Login", "User")",
                {
                    username: $('#Email').val(),
                    password: $('#Password').val()
                },
                function() {
                        $('.modal-popup').dialog("close");
                        $('#main').load("@Url.Action("Index", "User")",
                        {
                            uniqueName: $('#Email').val()
                        });
                });
            },
                      Cancel: function () {
                          $(this).dialog("close");
                      }
                  }
              });
          })
          return false;
      });
  });

【问题讨论】：

标签： javascript jquery asp.net-mvc jquery-dialog

【解决方案1】：

您只需要初始化一次模型。每当触发点击事件时，您都在执行此操作。第一次初始化后，每次都执行下面一行打开对话框。

$(target).dialog("open");

此外，您应该将选项“autoOpen”设置为 false。否则页面加载时会打开模态框。

【讨论】：

【解决方案2】：

也许模式已经在没有您的 javascript 代码（框架的一部分）的情况下在点击时打开？您也有 html 代码示例吗？
尝试在这段 javascript 代码的第一行添加e.PreventDefault()，看看会发生什么。

【讨论】：

是的，这很可能是一个触发两次的事件。或者，添加一个 console.log('Fire!') 并查看它被打印到控制台的次数。如果不止一次，那就是你的问题所在。

【解决方案3】：

您需要在 modal-popup div 上放置一个 style='display:none'。我很确定这是 .dialog("open") 操作的属性。

【讨论】：