我需要一些关于下面这个问题的帮助： 3个点是我的旋转木马指示器。
显然，旋转木马指示器位于前景并覆盖我的弹出模态图像。 我尝试将模态设置为z-index多于1但它不起作用。 这是代码
圆盘传送带
<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>语气
<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>模态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 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'">×</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!!
最满意答案
通常，您希望模态具有z-index: 999999; 或者像这样疯狂的东西，以便没有任何东西会超越它们（即使将来当你想要做复杂的分层事物时，你还会有999998层要先搞砸）。 检查css是否有滑块，并确保模态的z-index绝对更大。
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.
轮播指示符覆盖弹出模式(Carousel indicator overlies pop-up modal)我需要一些关于下面这个问题的帮助： 3个点是我的旋转木马指示器。
显然，旋转木马指示器位于前景并覆盖我的弹出模态图像。 我尝试将模态设置为z-index多于1但它不起作用。 这是代码
圆盘传送带
<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>语气
<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>模态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 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'">×</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!!
最满意答案
通常，您希望模态具有z-index: 999999; 或者像这样疯狂的东西，以便没有任何东西会超越它们（即使将来当你想要做复杂的分层事物时，你还会有999998层要先搞砸）。 检查css是否有滑块，并确保模态的z-index绝对更大。
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.
发布评论