AJAX Control Toolkit 自动完成出现在模态弹出窗口后面答案

【问题标题】：AJAX Control Toolkit auto-complete appearing behind the modal popupAJAX Control Toolkit 自动完成出现在模态弹出窗口后面
【发布时间】：2011-08-17 09:19:17
【问题描述】：

我在 AJAX 控件工具包中的 AutoCompleteExtender 遇到了问题，我似乎无法深入了解。该控件位于链接到工具包中的 ModalPopupExtender 的 asp:Panel 内。在最新一代的 IE9、FF 和 Opera 中一切正常，但在 Safari 和 Chrome 中出现故障（假设它与 WebKit 相关）。

问题在于自动完成的下拉菜单落在模态弹出窗口的后面而不是前面（出于隐私原因，名称模糊）：

查看 Firebug 中的内容，这是以无序列表呈现的下拉列表：

<ul id="EmployeeAutoCompleteExtender_completionListElem" class="autoCompleteList" style="width: 281px; visibility: visible; position: absolute; left: 0px; top: 22px; z-index: 1000; ">

autoCompleteList 类如下所示：

.autoCompleteList
{
  list-style: none outside none;
  border: 1px solid buttonshadow;
  cursor: default;
  padding: 0px;
  margin: 0px;
}

模态弹出窗口的结果 div 如下所示：

<div id="MainContent_AddPeoplePanel" class="modalPopup" style="z-index: 100001; position: absolute; left: 719px; top: 352.5px; opacity: 1; ">

使用以下 modalPopup CSS 类：

.modalPopup
{
  background-color: White;
  padding: 10px;
  width: 462px;
}

我的假设是列表中较低的 z-index 导致它落后于 div，但话又说回来，它在非 WebKit 浏览器中表现良好。 z 索引也是内联样式，因此它们显然直接来自控件。我在这里错过了什么吗？有什么建议？（除了放弃 WebForms 和 AJAX 并使用 jQuery）

【问题讨论】：

不幸的是，它位于防火墙后面，因此没有公开的实时示例。

标签： html css ajaxcontroltoolkit

【解决方案1】：

您怀疑是 z-index 导致了问题，如果您尝试使用 !important 覆盖由 Ajax 控制工具包吐出的内联样式会发生什么？

.autoCompleteList {
  list-style: none outside none;
  border: 1px solid buttonshadow;
  cursor: default;
  padding: 0px;
  margin: 0px;
  z-index:2000 !important;
}

.modalPopup {
  background-color: White;
  padding: 10px;
  width: 462px;
  z-index:1000 !important;
}

我知道这有点小技巧，但如果您还没有尝试过，可能值得一试？

【讨论】：

不错的一个！我最终只是放弃了“z-index：100002！important;”在 autoCompleteList 类上，它跳到了其他所有内容之上。哈克，但很开心:)
谢谢！我感觉这是一个 z-index 问题，但我错过了！important。这解决了它。

【解决方案2】：

Ian，我在模态弹出窗口和几个标注扩展器方面遇到了类似的问题。标注始终位于弹出窗口下方。我用 !important 和 poof 降低了模态的 z-index。开始工作了。非常感谢您的建议。

【讨论】：

【解决方案3】：

我也遇到过同样的问题。

我的代码在 mozilla 中运行良好。但它不适用于 Safari 和 Chrome。

现在我设置“z-index:12000 !important;”自动完成类，因为模态弹出窗口有 10051 z-index 值。

【讨论】：