如何在显示效果期间制作 jQuery UI 对话框模式？答案

【问题标题】：How can I make a jQuery UI Dialog Modal during the show-effect?如何在显示效果期间制作 jQuery UI 对话框模式？
【发布时间】：2009-12-02 10:31:23
【问题描述】：

我有一个 jQuery UI 对话框，它是模态的，并带有弹跳效果。我使用一个主题，其中背景用条纹图像变暗。第一次打开 Dialog 时，条纹背景也会在反弹效果期间覆盖对话框。反弹效果完成后，对话框变为模态并出现在条纹背景的前面。在下一次打开时，对话框会立即在背景前面弹跳。

如何让对话框立即出现在背景前面？

【问题讨论】：

标签： jquery-ui modal-dialog

【解决方案1】：

Tom 的回答为我指明了正确的方向，Firebug 非常有用！

对话框包裹在<div class="ui-effects-wrapper"> 中，该<div class="ui-effects-wrapper"> 是在ui\effects.core.js 中的createWrapper 函数中生成的我在那里添加了一个参数“z-index=1005”（只是为了确定；）。

所以在 jquery-ui-1.7.2.custom.min.js 中它现在看起来像这样

createWrapper:function(f){if(f.parent().is(".ui-effects-wrapper")){return f.parent()}var g={width:f.outerWidth(true),"z-index":1005,height:f.outerHeight(true),"float":f.css("float")};f.wrap('<div class="ui-effects-wrapper" style="font-size:100%;border:none;margin:0;padding:0;z-index:1002"></div>');

不确定这是否是最好的方法，但它有效。

【讨论】：

干得好。我曾经遇到过类似的情况，手风琴在活动时比静止时更宽。这导致页面布局跳转。我也不得不稍微修改一下库源代码。不是超级干净，但我没有其他办法。所以不要感觉太糟糕;-)

【解决方案2】：

这听起来像是在动画之后才分配对话框的 zIndex。在你的 CSS 中试试这个：

.ui-dialog {
  z-index: 1002;
}

对话框通常有这个 CSS 类，并且覆盖层的 zIndex 通常为 1000（至少在我当前使用的版本中）。如果这不起作用，请尝试找出（使用 Firebug）仅在动画期间分配了哪些其他类，并为这些类分配 zIndex。

【讨论】：