CSS

Question

jQuery 布局的 z-index 为 2。 Bootstrap 的模态没有设置 z-index。

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

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>

CSS - jQuery 布局 & Bootstrap 3 - Z-Index 问题？

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

jquery-layout

twitter-bootstrap