In this plunk I have an Angular UI Modal with a z-index larger than a div z-index, however the div is covering the modal. If you click on the div, you'll see that the modal is behind.
Since the z-index of the modal is larger, I expect it to be on top of the div. How can this be fixed?
HTML
<div class="div1" ng-click="hide()" ng-show="show" >
CLICK ME
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header" ng-style="{'z-index': 99000}">
<h4 class="modal-title">The Title</h4>
</div>
SOME TEXT IN THE MODAL
</script>
Javascript
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {
$scope.show = true;
(function() {
$scope.modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html'
});
})();
$scope.hide = function(){
$scope.show = false;
};
});
CSS
.div1 {
position: fixed;
z-index: 90000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: blue;
}
In order to make this work you must create a custom style for the z-index
property:
.zindex {
z-index: 99000 !important;
}
And apply the class to the modal window:
$scope.modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
windowClass: 'zindex'
});
Example: http://plnkr.co/edit/4T5Om0EcFAh5i4WUgNYi?p=preview
Try to use z-index with relative position.
HTML
<div class="div1" ng-click="hide()" ng-show="show" >
CLICK ME
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header" style="z-index: 99000; position:relative;">
<h4 class="modal-title">The Title</h4>
</div>
SOME TEXT IN THE MODAL
</script>
For reference : set Z index not working. button behind a container (HTML - CSS)
Try to put your z-index on the modal-dialog instead of the header and use modal-body:
<div class="div1" ng-click="hide()" ng-show="show" >
CLICK ME
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-dialog" style="z-index: 99000 !important">
<div class="modal-header">
<h4 class="modal-title">The Title</h4>
</div>
<div class="modal-body">
SOME TEXT IN THE MODAL
</div>
</div>
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With