Jquery UI 模式对话框

2022-01-17 00:00:00 overlay dialog modal-dialog javascript jquery-ui

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

I have a problem with Jquery UI modal dialogs. I have modal dialog (dialogA), which can create another modal dialog (dialogB). After the second creation and closure of the dialogB the overlay of dialogA disappear.

这是我的代码:

<!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.第一个对话框的覆盖消失了

Steps to reproduce:
1. create a dialog (dialog) by clicking on the button
2. create another dialog (dialogA) by clicking on the "create" button inside first dialog
3. close dialogA
4. repeat steps 2-3
5. overlay of the first dialog has been disappeared

谢谢

推荐答案

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

This is what I came up with, since this is obviously a bug with the modal dialog, I can present you with a "hack" that will work, but I think that the reason it messes up is the fact that when you create a modal dialog it adds the 

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

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

above the dialog div, and since you are appending all of the dialogs directly to the body, it gets confused which ones needs to close after awhile (this is only my assumption, which I really shouldn't be doing) :)

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

Workaround is to check on the number of dialogs and number of overlays every time CreateDIalog is called, and if they don't match, you manually insert a new overlay which will get rid of your problem. One thing with that is that, since this overlay was added manually, dialog doesn't know that it needs to hide it, so when you are back to only one dialog, and you close it, the overlay stays. That needs to be hidden manually as well.

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

I know this is not the best solution, but it's a workaround and it worked for me, so I hope you can use it until somebody comes up with a better solution.

代码如下:

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();
      }
    }

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

I added the check for dialogs and overlays:

      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);
      }

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

which takes care of adding an additional overlay when needed, and I added a function for reseting the overlay when you don't need it anymore

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

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

which is called in the close section of the dialog script

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

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

I haven't had a chance to test it thoroughly, but it might be a start if nothing else..

祝你好运

相关文章