【发布时间】：2015-10-27 16:15:44
【问题描述】：
我的项目中的下拉列表遇到了挑战。当我将它放在常规页面上时，它工作得很好。当我在模态中使用它时，内容位于模态后面并且无法访问。
我做了一些research，发现我的 z-index 有问题。但是，我仍然无法让它工作。我给模态框指定了 3000 的 z-index，并为下拉列表指定了 2147483647 的绝对最大 z-index，并且下拉列表仍然呈现在模态框后面。
这里是相关的 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-index。我正在使用顶部下拉菜单让下拉菜单保持在模式上方。
仅供参考 - 我已经注释掉了两者的位置项，因为当我启用它们时，模式根本不会显示。但是，根据我的阅读，我需要他们两个来完成这项工作。
这是模态的 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 -->
非常感谢所有帮助。
【问题讨论】：
-
你可以为你的问题提供一个小提琴吗？
-
这是一个显示问题的小提琴。 jsfiddle.net/ssipiora/85sd2zh6/5
标签： jquery html css twitter-bootstrap jquery-ui