Question

我在下面的问题上需要一些帮助： The 3 dots are my carousel indicator.

显然，旋转木马指示器位于前景并覆盖我弹出的模态图像。我尝试将模态设置为z-index多于1，但它不起作用。这是代码

传送带

bootstrap

模态

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

模态CSS

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

我不太清楚为什么会这样，我被卡住了。请给我一些指导如何解决这个问题!!

Answer 1

一般来说，你希望模态有一个z-index: 999999;或类似的东西，以便没有将超越它们（即使将来当你想做复杂的分层时，你和＃39;首先要有999998个图层。检查css是否有滑块，并确保模态的z-index肯定更大。

轮播指示符覆盖弹出模式

1 个答案: