Question

我在Bootstrap 3页面上有一个缩略图列表。单击它们时，我想打开一个模态，其中包含每个缩略图的附加信息轮播。

我希望当我点击缩略图时，模式会打开，旋转木马中的特定幻灯片会打开。

我正在尝试以下方法，但是模式的“数据切换”和轮播的“数据滑动到”属性都使用“数据目标”来设置目标，但在这种情况下，目标是两个不同的ID （分别为“#myModal”和“#gallery”）。我不能在同一个HTML标签上有两个“数据目标”。有没有办法轻易破解这个？对不起，我不是开发者。

这是缩略图列表：

<div class="container">
  <div class="row">
     <div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item1" data-toggle="modal" data-target="#myModal" data-slide-to="0"></div>
     <div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item2" data-toggle="modal" data-target="#myModal" data-slide-to="1"></div>
     <div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item3" data-toggle="modal" data-target="#myModal" data-slide-to="2"></div>
     <div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item4" data-toggle="modal" data-target="#myModal" data-slide-to="3"></div>
   </div>
</div>

这是模态代码：

<div class="modal fade" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></div>
            <div class="modal-body">

                <div id="gallery" class="carousel slide" data-interval="false">
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="http://placehold.it/600x400&text=item1" alt="item1">
                            <div class="carousel-caption">
                                <h4>heading 1</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/600x400&text=item2" alt="item2">
                            <div class="carousel-caption">
                                <h4>heading 2</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/600x400&text=item3" alt="item3">
                            <div class="carousel-caption">
                                <h4>heading 3</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/600x400&text=item4" alt="item4">
                            <div class="carousel-caption">
                                <h4>heading 4</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                    </div>
                    <a class="left carousel-control" href="#gallery" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                    <a class="right carousel-control" href="#gallery" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>

            </div>
        </div>
    </div>
</div>

Answer 1

您可以将图像包装在以这样的旋转木马为目标的锚点中：

<a href="#gallery" data-slide-to="0">
  <img src="http://placehold.it/150x75&text=item1" data-toggle="modal" data-target="#myModal">
</a>

演示：http://jsfiddle.net/NJWqw/

在bootstrap中以模态加载旋转木马中的特定幻灯片

1 个答案: