我想在旋转木马幻灯片上方显示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. Bootstrap 2.x旋转木马幻灯片和ui.bootstrap(angularjs)不能一起工作
- 2. Twitter Bootstrap旋转木马幻灯片不起作用
- 3. Bootstrap旋转木马不能回到第一张幻灯片
- 4. 如何使不断旋转木马幻灯片与猫头鹰旋转木马
- 5. Bootstrap旋转木马的第一张幻灯片的问题
- 6. 多幻灯片旋转木马
- 7. Bootstrap旋转木马不显示幻灯片
- 8. Bootstrap旋转木马不识别幻灯片超过10
- 9. 如何不重置Bootstrap旋转木马幻灯片
- 10. bootstrap旋转木马幻灯片控制不响应
- 11. Bootstrap旋转木马不显示幻灯片
- 12. Bootstrap旋转木马箭头不改变幻灯片
- 13. 实现旋转木马幻灯片的智能方式
- 14. Swiper旋转木马幻灯片PerView无法正常工作
- 15. Bootstrap旋转木马 - 如何获得幻灯片的计数
- 16. Twitter Bootstrap旋转木马:获取幻灯片的方向
- 17. Bootstrap幻灯片旋转木马全屏缩略图
- 18. 将“background-size:cover”应用于Twitter Bootstrap旋转木马幻灯片
- 19. Twitter Bootstrap旋转木马幻灯片持续时间
- 20. twitter bootstrap旋转木马行布局,没有幻灯片
- 21. 偶数幻灯片隐藏在Bootstrap的旋转木马中
- 22. Twitter Bootstrap旋转木马:最后一张幻灯片与第一张幻灯片重叠
- 23. bootstrap旋转木马不起作用
- 24. 旋转木马模式内不工作
- 25. Twitter Bootstrap旋转木马不工作
- 26. bootstrap旋转木马控件不会更改为上一张幻灯片
- 27. 猫头鹰旋转木马中心幻灯片与特定类
- 28. 旋转木马类型的jquery幻灯片与数字
- 29. 旋转木马与当前幻灯片的缩放
- 30. Bootstrap旋转木马显示下一张幻灯片的一部分
请发布一些重现问题的相关代码。您可能只需要一个较大的模式“z-index”,以便它与幻灯片放映重叠,但如果没有看到您的代码就不可能知道。 – Blazemonger 2015-04-07 14:58:25