Question

我正在尝试从旋转木马图像中启动模态。我找到了一些相关的线程，但没有一个建议代码对我有用。下面是轮播代码，但我想知道如何实现与它相关的模态代码..？任何帮助将不胜感激！

<div id="well">
<div id="myCarousel" class="carousel slide">

<!-- Carousel items -->
<div class="carousel-inner">

<div class="item active">
    <div class="row-fluid">
      <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></a></div>
      <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></a></div>
      <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></a></div>
      <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></a></div>
    </div><!--/row-fluid-->
</div><!--/item-->

<div class="item">
    <div class="row-fluid">
        <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></a></div>
        <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></a></div>
        <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></a></div>
        <div class="span3"><a href="OilBarrons" class="thumbnail"><img src="<%= asset_path( 'OilBarrons.jpg' ) %>" alt="Oil Barrons" style="max-width:100%;" /></a></div>
    </div><!--/row-fluid-->
</div><!--/item-->

<div class="item">
    <div class="row-fluid">
        <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
        <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
        <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
        <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
    </div><!--/row-fluid-->
</div><!--/item-->

</div><!--/carousel-inner-->

<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!--/myCarousel-->

</div><!--/well-->

<!-- Call jQuery 1.9, call bootstrap.js and run the carousel when the DOM is ready. Slide every 10 seconds. -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#myCarousel').carousel({
        interval: 10000
        })
    });
</script>

Answer 1

首先，您应该将模态“代码”添加到您的页面（您可以将其放在页面的末尾）：

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

然后，您必须将轮播的图像链接“连接”到模态：

正确的链接是这样的：

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

在你的情况下，像这样：

<a href="#myModal" role="button" data-toggle="modal"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a>

请记住将锚点的href与模态的id匹配。

您可以在此链接中看到更多选项：http://twitter.github.io/bootstrap/javascript.html#modals

最后一件事，最好是在头部而不是在正文中加载以下脚本：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>

如何从bootstrap轮播图像启动模态？

1 个答案: