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>