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

Question

jQuery Layout's z-index is 2. Bootstrap's modal does not have a z-index set.

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

z-index is applied in a style attribute.

<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 is reporting the modal's z-index is set to "auto". Changing it to anything else, does not make the modal appear above the layout's resizer.

Any ideas?

Answer 1

You have a nested div within the modal.

<!-- 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>

should be like this:

</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>