Bootstrap模式不能與旋轉木馬幻燈片一起工作

Question

我想在旋轉木馬幻燈片上方顯示bootstrap模式。但沒有顯示出來。當我從chrome瀏覽器控制檯手動觸發它時，我可以從日誌中看到模式正在觸發。但它沒有得到顯示給用戶。有什麼我可以做的嗎？

Answer 1

模式修復問題

Answer 2

下載自舉模式，carousel.css和自舉模式，carousel.js（你可以找到他們在谷歌搜索），然後嘗試這個例子：增加一個較大的z-index爲

<link href="bootstrap-modal-carousel.css" rel="stylesheet" /> 

<script src="bootstrap-modal-carousel.js"/></script/> 

<button type="button" class="btn" data-toggle="modal" data-target="#myModal" data-local="#myCarousel">Demo</button> 

<div id="myCarousel" class="carousel slide carousel-fit" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide"> 
     <div class="carousel-caption"> 
     <h3>First slide label</h3> 
     <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> 
     </div> 
    </div> 
    <div class="item"> 
     <img data-src="holder.js/750x400/auto/#666:#444/text:Second slide" alt="Second slide"> 
     <div class="carousel-caption"> 
     <h3>Second slide label</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     </div> 
    </div> 
    <div class="item"> 
     <img data-src="holder.js/600x300/auto/#555:#333/text:Third slide" alt="Third slide"> 
     <div class="carousel-caption"> 
     <h3>Third slide label</h3> 
     <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> 
     </div> 
    </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div> 

<div class="modal fade modal-fullscreen force-fullscreen" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>One fine body…</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal -->