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

Posted 2023-02-16

【中文标题】如何在显示效果期间制作 jQuery UI 对话框模式？

【英文标题】：How can I make a jQuery UI Dialog Modal during the show-effect?

【发布时间】：2009-12-02 10:31:23

【问题描述】：

我有一个 jQuery UI 对话框，它是模态的，并带有弹跳效果。我使用一个主题，其中背景用条纹图像变暗。 第一次打开 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。