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

Question

我在AJAX Control Toolkit中遇到了AutoCompleteExtender的问题，我似乎无法深入到底。该控件位于一个asp：Panel中，该工具包链接到ModalPopupExtender。在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-index也是内联样式，所以它们显然是直接来自控件。我在这里错过了什么吗？有什么建议？ （除了放弃WebForms和AJAX并使用jQuery）

Answer 1

如果您怀疑是z-index导致问题，那么如果您尝试使用!important覆盖Ajax Control Toolkit吐出的内联样式会发生什么？

.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;
}

我知道这有点像黑客但是如果你还没试过它可能值得一试？

Answer 2

Ian，我遇到了类似的模式弹出窗口和几个标注扩展器的问题。标注总是在弹出窗口下。我用！important和poof降低了模态的z-index。开始工作了。非常感谢你的建议。

Answer 3

我遇到了同样的问题。

我的代码在mozilla中运行得非常好。但它无法在Safari和Chrome上运行。

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