Jquery UI 模式对话框答案

【问题标题】：Jquery UI modal dialogsJquery UI 模式对话框
【发布时间】：2011-02-07 21:39:36
【问题描述】：

我对 Jquery UI 模式对话框有疑问。我有模态对话框（dialogA），它可以创建另一个模态对话框（dialogB）。在 dialogB 的第二次创建和关闭后，dialogA 的覆盖消失了。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><link type="text/css" rel="Stylesheet" href="ui-lightness/jquery-ui-1.8.custom.css" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript">
        function createDialog(dialogId) {
   $('#' + dialogId).dialog({
    autoOpen: true,
    modal: true,
    buttons: {
     'close': function() {
      $(this).dialog('close');
     },
     'create': function() {
      var newDialogId = dialogId + '1';
      $('body').append('<div id="' + newDialogId + '">' + newDialogId + '</div>');
      createDialog(newDialogId);
     }
    },
    close: function() {
     $(this).dialog('destroy');
     $(this).remove();
    }
   });
  }

  $(document).ready(function() {
   $('#button1').click(function() {
    var dialogId = 'dialog';
    $('body').append('<div id="' + dialogId + '">' + dialogId + '</div>');
    createDialog(dialogId);
   });   
  });
    </script>
</head>
<body>
    <button id="button1">Create dialog</button> 
</body>
</html>

http://jsbin.com/otama

复制步骤：
1.通过点击按钮创建一个对话框（dialog）
2. 通过单击第一个对话框内的“创建”按钮创建另一个对话框 (dialogA)
3. 关闭对话框A
4. 重复步骤 2-3
5.第一个对话框的覆盖消失了

谢谢

【问题讨论】：

绝对看起来像一个错误，如果您为相同的 z-index 创建两次模式对话框，则覆盖会破坏。您可以手动增加 z-index 吗？作为替代方案，您可以通过一些插件自己进行模态叠加，例如flowplayer.org/tools/demos/overlay/modal-dialog.html

标签： javascript jquery-ui dialog modal-dialog overlay

【解决方案1】：

这就是我想出的，因为这显然是模态对话框的一个错误，我可以向您展示一个可行的“hack”，但我认为它搞砸的原因是当您创建一个模态对话框，它添加了

<div class="ui-widget-overlay"></div>

在对话框 div 上方，并且由于您将所有对话框直接附加到正文，它会混淆哪些对话框需要在一段时间后关闭（这只是我的假设，我真的不应该这样做）:)

解决方法是在每次调用 CreateDIalog 时检查对话框的数量和叠加层的数量，如果它们不匹配，您手动插入一个新的叠加层，这将解决您的问题。有一件事是，由于此叠加层是手动添加的，因此对话框不知道它需要隐藏它，因此当您只返回一个对话框并关闭它时，叠加层会保留。这也需要手动隐藏。

我知道这不是最好的解决方案，但它是一种解决方法，它对我有用，所以我希望你可以使用它，直到有人提出更好的解决方案。

代码如下：

function createDialog(dialogId) {
      $('#' + dialogId).dialog({
        autoOpen: true,
        modal: true,
        buttons: {
          'close': function() {
            $(this).dialog('close');
          },
          'create': function() {
            var newDialogId = dialogId + '1';
            $('body').append('<div id="' + newDialogId + '">' + newDialogId + '</div>');
            createDialog(newDialogId);
          }
        },
        close: function() {
          $(this).dialog('destroy');
          $(this).remove();
          resetOverlays();
        }
      });

      var dialogs = $("div.ui-dialog");
      var overlays = $("div.ui-widget-overlay");
      var overlayStyle = $(overlays[0]).attr("style");

      if(dialogs.length > overlays.length)
      {
        var overlay = $("<div></div>").addClass("ui-widget-overlay").attr("style", overlayStyle).css("z-index", "1001");
        $("body").append(overlay);
      }
    }

    function resetOverlays()
    {
      var dialogs = $("div.ui-dialog");
      if(dialogs.length == 0)
      {
        $(".ui-widget-overlay").remove();
      }
    }

我添加了对话框和覆盖的检查：

      var dialogs = $("div.ui-dialog");
      var overlays = $("div.ui-widget-overlay");
      var overlayStyle = $(overlays[0]).attr("style");

      if(dialogs.length > overlays.length)
      {
        var overlay = $("<div></div>").addClass("ui-widget-overlay").attr("style", overlayStyle).css("z-index", "1001");
        $("body").append(overlay);
      }

它负责在需要时添加额外的叠加层，并且我添加了一个功能，用于在您不再需要它时重置叠加层

        function resetOverlays()
        {
          var dialogs = $("div.ui-dialog");
          if(dialogs.length == 0)
          {
            $(".ui-widget-overlay").remove();
          }
        }

在对话脚本的关闭部分调用

           ,close: function() {
              $(this).dialog('destroy');
              $(this).remove();
              resetOverlays();
            }

我还没有机会彻底测试它，但如果没有别的，这可能是一个开始..

祝你好运

【讨论】：

【解决方案2】：

此问题已作为错误提出并已关闭。最新的 jQuery UI 版本 (1.8.10) 将解决这个问题。详情请查看ticket。

【讨论】：