aaronyyeo aaronyyeo - 17 days ago 4
AngularJS Question

Carousel indicator overlies pop-up modal

I needed some help with this problem below:
The 3 dots are my carousel indicator.

Apparently, the carousel indicator is in the foreground and covers my pop-up modal image. I tried setting the modal to z-index more than 1 but it does not work. Here are the codes

Carousel

<div ng-controller="CarouselCtrl">
<div class="carouselDiv">
<div uib-carousel active="active" interval="usrInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" class="carImg">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
</div>
</div>
</div>


Modal

<div id="myModal" class="modal">

<span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

<img class="modal-content" id="img01">

<div id="caption"></div>
</div>


Modal CSS

.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 120px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}

.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}


I'm not very sure why this is happening and I'm stuck. Please provide me some guidance as to how to solve this thanks!!

Answer

Generally, you want modals to have a z-index: 999999; or something crazy like that so that nothing will go above them (even in the future when you want to do intricate layering stuff, you'll have 999998 layers to mess with first). Check the css for the slider and be sure that the z-index of your modal is definitely bigger.