javascript – Jquery UI模式对话框

2019-06-21 23:20:05 阅读：198 来源： 互联网

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

我有一个Jquery UI模式对话框的问题.我有模态对话框(dialogA),它可以创建另一个模态对话框(dialogB).在对话框B的第二次创建和关闭之后,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.单击按钮创建对话框(对话框)
2.通过单击第一个对话框中的“创建”按钮创建另一个对话框(dialogA)
3.密切对话A.
4.重复步骤2-3
5.第一个对话框的叠加已经消失

谢谢

解决方法:

这就是我提出的,因为这显然是模态对话框的一个错误,我可以向你展示一个可以工作的“黑客”,但我认为它弄乱的原因是当你创建一个模态时它添加了对话框

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

在对话框div之上,并且因为你将所有对话框直接附加到正文,所以在一段时间之后需要关闭哪些对象(这只是我的假设,我真的不应该这样做):)

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

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

这是代码：

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部分中调用

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

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

祝好运

标签：javascript,dialog,jquery-ui,modal-dialog,overlay
来源： https://codeday.me/bug/20190621/1258663.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Jquery UI模式对话框