在模态JQuery UI对话框上方可靠地覆盖div（工具提示）？答案

【问题标题】：Reliably overlay div (tooltip) above modal JQuery UI Dialog?在模态JQuery UI对话框上方可靠地覆盖div（工具提示）？
【发布时间】：2010-06-21 12:00:53
【问题描述】：

我正在使用 CSS/Javascript 来显示鼠标悬停时各种输入的工具提示。这适用于很多不同的条件，但我在 modal Jquery UI 对话框中的输入时遇到了一些问题。当我第一次打开对话框时，它可以 100% 正常工作（工具提示显示在对话框的 front 中），但如果我关闭它并重新打开它（没有重新加载页面），工具提示将显示在对话框后面。我确实明确设置了tooltip div和dialog的z-index，这样tooltip的值就更高了，但只在第一次起作用。如果我将对话框设置为非模态，即使重新打开也一切正常（但在这个用例中我更喜欢模态）注意：在 Firefox 3.6.3 中测试

关于为什么它只在第一次打开对话框时起作用的任何想法？

我有一个辅助 div：

<div style="float: right; margin: 0px 10px 5px 0px;" id="tool_tip_help_id"></div>

我将在其中附加实际的工具提示：

jq('div#tool_tip_help_id').append('<div id="tool_tip_id" class="toolTipDiv" style="display: none;"></div>');

工具提示 div 的 CSS：

div.toolTipDiv{
    background-color:  #FFFF99;
    border-left: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 3px solid gray;
    border-bottom: 3px solid gray; 
    position: absolute;
    padding: 2px 2px 2px 2px;
        line-height: 120%;
    font-size: 12px;
    z-index: 100; 
}

相关对话框声明示例：

jq("#Dialog").dialog( {
                bgiframe: true,
                autoOpen: false,
                width: 595,
                modal: true,
                draggable: false,
                zIndex: 1,
});

【问题讨论】：

您是否尝试增加 z-index？比如 1001 什么的
+1 - 它不适用于 1001 但它适用于 1003 :) （至少在 Firefox 中，尚未在其他浏览器中测试过）。可以肯定的是，我现在已经将它设置为很大（100100）。如果我检查 Firebug，出于某种原因，当对话框首次打开时，我的对话框 zIndex 设置是 kinda 尊重的，它设置为 3 ，但是当我第二次打开它时，它被设置为 1002.
现在不确定如何“关闭”它，也许你应该将它添加为答案:)。无论如何，这让我想起了不相信 3rd 方代码在没有实际检查的情况下完全按预期行事。这一点我平时都知道，但这次忽略了。

标签： jquery css jquery-ui

【解决方案1】：

它不适用于 z-index 1001，但它适用于 1003。

因此，将其设置为一个非常大的值应该可以工作 (100100)。

【讨论】：

我将此作为答案添加，以便确认和关闭。