1

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

<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">‹&lt;/a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›&lt;/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>
4

1 回答 1

2

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

<!-- 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…&lt;/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>
于 2013-06-22T11:05:39.930 回答