使用 javascript 和 div 的弹出窗口在 Firefox 和 IE 中的行为不同答案

【问题标题】：Popup using javascript & div doesnot behave same in Firefox & IE使用 javascript 和 div 的弹出窗口在 Firefox 和 IE 中的行为不同
【发布时间】：2011-05-05 11:54:24
【问题描述】：

我在一个 jsp 页面中有一个使用 div 和 javascript 的弹出窗口，该页面也有一些丰富的控件。

<a class="pr-toolbar-link pr-icon-help" href="#"
  onclick="popupWindow('aboutPopup',true);" 
  onblur="popupWindow('aboutPopup',false);">About</a>
<div id="aboutPopup" class="popup">
  <div class="popupbody">
<p>Some Message</p>
  </div>
</div>

当我单击“关于”时，弹出窗口在 Firefox 中正确显示，即在所有其他内容的顶部，但在 IE 中，它与其他控件重叠。以下是CSS

.popup { border: solid 1px #333; font-family: Tahoma; font-size: 12px; display: none; position: absolute; width:300px; z-index:1; }
.popuptitle { background: #784574; color: white; font-weight: bold; height: 15px; padding: 5px;      }
.popupbody { background: #dee5ec; padding: 5px; text-align: center; }
#aboutPopup { top: 27px; left: 110px; }

我尝试将 z-index 值设置为高于所有其他控件，但仍然没有任何不同。

编辑：

火狐弹出窗口

IE7 弹出窗口

【问题讨论】：

你为什么不用<rich:modelPanel>？
您使用的是哪个版本的 IE？我认为在某些版本的 IE 中，它们不会让你覆盖文本框，也许还有带有 div 的按钮，因为这样文本框总是显示出来
我添加了 snap。 @Gavin 它的 IE7。 @Niksvp 我试过但得到了类似的结果。
Gavin Draper 是真的，我经常不得不隐藏在旧 IE 中使用 javascript 弹出的 div 下的控件，以便尽管 z-index 正确，它们也不会显示在顶部...这是旧的 IE 行为，可悲的是无事可做......

标签： javascript html popup richfaces

【解决方案1】：

问题在于添加弹出窗口的代码位置。我正在添加接近类似的代码，即在菜单控件之前。因此，即使更改了 z-index，它也不在 IE7 的菜单控件前面。我只是将代码移到菜单控制代码之后的末尾，它也可以在 IE7 中使用。不管怎样，谢谢大家的建议。

【讨论】：