我的元素中的下拉列表遇到了挑战。当我将它放在常规页面上时，它工作得很好。当我将它放在模态中时，内容位于模态后面并且无法访问。
我做了一些research看看我的 z 索引有问题。但是，我仍然无法让它工作。我给模态的 z 索引为 3000，给下拉菜单的绝对最大 z 索引为 2147483647，并且下拉菜单仍然呈现在模态后面。
这是相关的CSS:
/*trying to get query dropdown on top*/
.dropdown-on-top{
/*position: absolute;*/
z-index: 2147483647;
}
.modal-below-dropdown{
/*position: relative;*/
z-index: 3000;
}
/*end of tring to get query dropdown on top:*/
我正在使用 model-below-dropdown 来设置模态的 z 索引。我使用 dropdown-on-top 让下拉菜单保持在模式上方。
仅供引用 - 我已经注释掉了两者的位置项，因为当我启用它们时，模式根本不会显示。但是，根据我所读到的内容，我需要他们两个才能完成这项工作。
这里是模式的 HTML:
<div class="modal modal-message modal-below-dropdown fade" id="modal" style="display: none;">
<div class="modal-dialog modal-below-dropdown">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Create Query</h4>
</div>
</br>
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Query Name</label>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Query Name">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Media</label>
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" value="">
Print
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
Digital
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Type</label>
<div class="col-md-6">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="">
Add
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="">
Drop
</label>
</div>
</div>
</div>
</form>
<!-- <hr> -->
<table class="table table-valign-middle m-b-0">
<thead>
<th class="col-md-8">Demographic</th>
<th class="col-md-3"> </th>
<th class="col-md-2">Values</th>
<th class="col-md-1">Operator</th>
<th class="col-md-2"> </th>
</thead>
<tbody>
<tr>
<td class="col-md-8">
<!-- trying jquery autocomplete combo box -->
<div class="ui-widget">
<select id="combobox" class="dropdown-on-top">
<option value="Select one...">Select one...</option>
<option value="Product Registration > Magazine > On File">"Product Registration > Magazine > On File"</option>
<option value="Product Registration > Magazine > BPA Par 3B Source">"Product Registration > Magazine > BPA Par 3B Source"</option>
<option value="Product Registration > Magazine > Promo Key">"Product Registration > Magazine > Promo Key"</option>
<option value="Product Registration > Magazine > Record Status">"Product Registration > Magazine > Record Status"</option>
<option value="Product Registration > Magazine > Subtype">"Product Registration > Magazine > Subtype"</option>
<option value="Product Registration > Magazine > Verification Date">"Product Registration > Magazine > Verification Date"</option>
<option value="Product Registration > Magazine > Activated Date">"Product Registration > Magazine > Activated Date"</option>
</select><span <i class="fa fa-lg fa-sort-desc"></span>
</div>
<!-- end trying jquery autocomplete combo box -->
</td>
<td class="col-md-3">
<select class="form-control">
<option>Equals</option>
<option>Not Equal To</option>
<option>Contains</option>
<option>Does Not Contain</option>
<option>Is Empty</option>
<option>Is Not Empty</option>
</select>
</td>
<td class="col-md-3">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td class="col-md-1">
<select class="form-control">
<option> </option>
<option>And</option>
<option>Or</option>
</select>
</td>
<td class="col-md-1">
<td> </td>
</td>
</tr>
<tr>
<td class="col-md-4">
<select class="form-control">
<option> </option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td class="col-md-3">
<select class="form-control">
<option>Equals</option>
<option>Not Equal To</option>
<option>Contains</option>
<option>Does Not Contain</option>
<option>Is Empty</option>
<option>Is Not Empty</option>
</select>
</td>
<td class="col-md-3">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td class="col-md-1">
<select class="form-control">
<option> </option>
<option>And</option>
<option>Or</option>
</select>
</td>
<td class="col-md-1">
<td> </td>
</td>
</tr>
<tr>
<td class="col-md-4">
<select class="form-control">
<option> </option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td class="col-md-3">
<select class="form-control">
<option>Equals</option>
<option>Not Equal To</option>
<option>Contains</option>
<option>Does Not Contain</option>
<option>Is Empty</option>
<option>Is Not Empty</option>
</select>
</td>
<td class="col-md-3">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td class="col-md-1">
<select class="form-control">
<option> </option>
<option>And</option>
<option>Or</option>
</select>
</td>
<td class="col-md-1">
<td class="text-left"><i class="fa fa-lg fa-plus-circle"></i></td>
</td>
</tr>
</tbody>
</table>
<div class="modal-footer">
<a href="javascript:;" class="btn btn-sm btn-primary">Save Query</a>
<a href="javascript:;" class="btn btn-sm btn-white" data-dismiss="modal">Cancel</a>
</div>
</div>
</div>
</div>
<!-- End Add Query -->
非常感谢所有帮助。
最佳答案
Jquery插件隐藏了原来的select <select id="combobox">并应用其他 HTML 标签。因此，为隐藏的内容编写 CSS 不会改变任何事情。
您应该使用ui-autocomplete.ui-menu作为 CSS 选择器来设置下拉菜单的样式。
尝试:
.ui-autocomplete.ui-menu {
z-index: 3001;
}
关于jquery - 模态下方的下拉内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33373113/