Jquery UI模式对话框

问题描述：

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

这里是我的代码：

<!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.覆盖已经消失

感谢

差别看起来像一个bug，如果为同一个z-index创建两次模态对话框，叠加层将会破坏。你能手动增加z-index吗？作为替代，你可以通过一些插件，例如http://flowplayer.org/tools/demos/overlay/modal-dialog.html – 2010-04-15 16:47:05

答

这是我想出了，因为这显然是与模态对话框中的错误，我可以为你展示一个“黑客”，将工作，但我认为它会搞砸的原因是，当你创建一个模式对话框它添加对话框DIV的

<div class="ui-widget-overlay"></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(); 
      }

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

好运

谢谢。它工作正常。 – 2010-04-16 05:39:16

答

这个问题有人提出作为bug并关闭。最新的jQuery UI版本（1.8.10）可以解决这个问题。请查看ticket了解更多详情。

Jquery UI模式对话框

相关推荐