我想在旋轉木馬幻燈片上方顯示bootstrap模式。但沒有顯示出來。當我從chrome瀏覽器控制檯手動觸發它時,我可以從日誌中看到模式正在觸發。但它沒有得到顯示給用戶。有什麼我可以做的嗎?Bootstrap模式不能與旋轉木馬幻燈片一起工作
1
A
回答
1
模式修復問題
0
下載自舉模式,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">×</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 -->
+1
請不要張貼僅鏈接的答案。提供一些相關的代碼,或至少對解決方案的描述,以防鏈接的內容在未來某個時候消失。 – Blazemonger 2015-04-07 14:57:26
+0
編輯!抱歉!我是新手! :( – Charly 2015-04-07 15:37:14
相關問題
- 1. Twitter Bootstrap旋轉木馬幻燈片不起作用
- 2. Bootstrap旋轉木馬的第一張幻燈片的問題
- 3. Bootstrap旋轉木馬不識別幻燈片超過10
- 4. 如何不重置Bootstrap旋轉木馬幻燈片
- 5. Bootstrap旋轉木馬箭頭不改變幻燈片
- 6. 多幻燈片旋轉木馬
- 7. 偶數幻燈片隱藏在Bootstrap的旋轉木馬中
- 8. twitter bootstrap旋轉木馬行佈局,沒有幻燈片
- 9. Bootstrap幻燈片旋轉木馬全屏縮略圖
- 10. Twitter Bootstrap旋轉木馬:最後一張幻燈片與第一張幻燈片重疊
- 11. 旋轉木馬模式內不工作
- 12. 貓頭鷹旋轉木馬中心幻燈片與特定類
- 13. 旋轉木馬類型的jquery幻燈片與數字
- 14. Bootstrap旋轉木馬指示燈不工作
- 15. 使用CSS一次顯示所有Bootstrap旋轉木馬幻燈片
- 16. Flexslider 2.2旋轉木馬幻燈片不保持同步後animationLoop
- 17. 引導旋轉木馬幻燈片按鍵不靈
- 18. 旋轉木馬幻燈片不滑動在鉻和mozilla
- 19. Bootstrap旋轉木馬 - 僅爲第一個旋轉木馬工作的控件
- 20. Bootstrap旋轉木馬
- 21. 貓頭鷹旋轉木馬幻燈片轉換
- 22. 當定位在其他Bootstrap旋轉木馬幻燈片位置時,Particles.js畫布不起作用
- 23. Bootstrap旋轉木馬幻燈片弄亂了網站的元素和內容
- 24. 如何更改每個Bootstrap旋轉木馬幻燈片上標題的位置?
- 25. 幻燈片更改時更改Bootstrap的旋轉木馬箭頭顏色
- 26. Bootstrap旋轉木馬。隱藏在第一和最後一張幻燈片「以前」和「下一個」按鈕 - 「幻燈片」事件不工作
- 27. 多個幻燈片貓頭鷹旋轉木馬上的動畫
- 28. slidesjs幻燈片旋轉木馬上方slides_container空間 - css
- 29. 貓頭鷹旋轉木馬中的錯誤,換行幻燈片
- 30. 貓頭鷹旋轉木馬幻燈片n由
請發佈一些重現問題的相關代碼。您可能只需要一個較大的模式「z-index」,以便它與幻燈片放映重疊,但如果沒有看到您的代碼就不可能知道。 – Blazemonger 2015-04-07 14:58:25