CSS - jQuery Layout & Bootstrap 3 - Z-Index Issue？

Question

jQuery Layout的z-index为2。Bootstrap的模态没有z-index集。

http://plnkr.co/edit/yy88iK8t3f2v3pEe5812?p =

预览

z-index用于style属性。

<div class="ui-layout-resizer ui-layout-resizer-north ui-layout-resizer-open ui-layout-resizer-north-open"
     style="position: absolute;
            padding: 0px;
            margin: 0px;
            font-size: 1px;
            text-align: left;
            overflow: hidden;
            z-index: 2;
            top: 90px;
            cursor: default;
            width: 1920px;
            height: 13px;
            left: 0px;"
     id=""
>
    <div title="Close"
         class="ui-layout-toggler ui-layout-toggler-north ui-layout-toggler-open ui-layout-toggler-north-open"
         style="position: absolute; display: block; padding: 0px; margin: 0px; overflow: hidden; text-align: center; font-size: 1px; z-index: 1; visibility: visible; cursor: pointer; width: 48px; height: 13px; left: 935px; top: 0px;"
         id=""
     >
    </div>
</div>

FF报告模态的z-index设置为"auto"。将其更改为其他内容，不会使模式显示在布局的调整器上方。

任何想法?

Answer 1

在模态中有一个嵌套的div。

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</div> <!-- this div should not be within your Modal -->
</body>

应该像这样:

</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>