Question

我的模态对话框中有一个bootstrap下拉列表。点击下拉按钮下拉菜单出现在表格下方。有没有办法解决这个问题，但没有使用＆＃34; position：fixed＆＃34;，因为使用固定属性我面临其他问题。

<div id="dialog" title="Basic dialog" ng-show='showDialog'>
    <div class="container">
       <h2>Dropdown</h2>
       <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
             <li><a href="#">AAAAAA</a></li>
             <li><a href="#">BBBBBB</a></li>
             <li><a href="#">CCCCCC</a></li>
             <li><a href="#">DDDDDD</a></li>
             <li><a href="#">EEEEEE</a></li>
             <li><a href="#">FFFFFF</a></li>
          </ul>
       </div>
    </div>
</div>

See the dropdwon plnkr

Answer 1

问题在于，对话框是一个div，有效地“包含”下拉列表及其所有内容，因此drowpdown堆叠上下文被代替。

您可以添加此css规则来解决您的问题，但请小心使用，以免在您应用的其他对话框中产生任何副作用：

<style>
  .ui-dialog, #dialog, #container { overflow:visible; }
</style>

你还有一篇很棒的文章here解释堆叠上下文，因为Z-Index不是大多数人的想法......

自定义下拉Z-Index问题

1 个答案: