Question

In this plunk我有一个带有下拉列表的Angular UI模式。下拉列表中有uib-dropdown dropdown-append-to-body指令来显示完整列表，即使它位于带有overflow:hidden的div中。

如果单击该按钮，您将看到下拉列表位于模态后面。如何修复z-index？

HTML

    <button ng-click="openModal()">Open modal</button>
    <script type="text/ng-template" id="myModalContent.html">

    <div class="modal-header">
        <h4 class="modal-title">The Title</h4>
    </div>

    <div style="background-color:orange;overflow-y:hidden;height:30px">
      <div class="btn-group" uib-dropdown dropdown-append-to-body>
        <button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle="">
              Dropdown on Body    <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body">
          <li role="menuitem">
            <a href="#">Action</a>
          </li>
          <li role="menuitem">
            <a href="#">Another action</a>
          </li>
          <li role="menuitem">
            <a href="#">Something else here</a>
          </li>
          <li class="divider"></li>
          <li role="menuitem">
            <a href="#">Separated link</a>
          </li>
        </ul>
      </div>
    </div>
 </script>

的Javascript

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {

    $scope.openModal = function() {
          $scope.modalInstance = $uibModal.open({
              templateUrl: 'myModalContent.html',
              scope: $scope
            });   
        };
});

Answer 1

像这样使用z-index：

<div class="btn-group" uib-dropdown dropdown-append-to-body>
      <button id="btn-append-to-body" type="button" 
        class="btn btn-primary" uib-dropdown-toggle>
        Dropdown on Body <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" uib-dropdown-menu role="menu" 
            aria-labelledby="btn-append-to-body" 
            style="z-index:39999">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
      </ul>
    </div>

Answer 2

将此类添加到CSS文件

.dropdown-menu.model-top{
    z-index:39999;
}

HTML

<ul class="dropdown-menu model-top" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body"></ul>

注意：内联CSS不起作用，正在用自己的样式替换style属性，比如position，height

模态中的Angular UI下拉z-index

2 个答案: