I'm having trouble with the following issue: The 3 dots represent my carousel indicator.
My problem is that the carousel indicator is blocking my pop-up modal image. I've tried adjusting the z-index of the modal without success. Here is the code:
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'">×</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 unsure why this issue is occurring and I could use some guidance on how to resolve it. Any help would be appreciated. Thank you!