Question

我刚开始使用Bootstrap 3.我制作了一个缩略图网格，其中包含与不同项目相关的图像。我希望在点击图像时打开一个模态窗口。在模态中，我需要报告来自缩略图的图像和一些解释项目内容的文本。有任何想法，建议如何做到这一点？

Answer 1

在Bootstrap中添加模式非常简单，Bootstrap文档中有一些示例：http://getbootstrap.com/javascript/#modals。

我建议尝试一些示例，看看你能走多远，然后如果你遇到困难，你可以要求具体细节。

Answer 2

我编码如下

<div class="container">
        <div class="row">
            <div class="col-sm-4 col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-thumbnail"><a class="" href="#" title="Renovations"><img src="//placehold.it/600x400/444/F8F8F8" class="img-responsive"></a>
                    </div>
                    <div class="panel-body">
                        <p class="">Renovations</p>
                        <p class=""></p>
                    </div>
                </div>
                <!--/panel-->
            </div>
            <!--/col-->
            <div class="col-sm-4 col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-thumbnail"><a class="" href="#" title="Academic Institutions"><img src="//placehold.it/600x400/454545/FFF" class="img-responsive"></a>
                    </div>
                    <div class="panel-body">
                        <p class="">Academic Institutions</p>
                        <p class=""></p>
                    </div>
                </div>
                <!--/panel-->
            </div>
            <!--/col-->
            <div class="col-sm-4 col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-thumbnail"><a class="" href="#" title="Interiors"><img src="//placehold.it/600x400/555/F2F2F2" class="img-responsive"></a>
                    </div>
                    <div class="panel-body">
                        <p class="">Interiors</p>
                        <p class=""></p>
                    </div>
                </div>
                <!--/panel-->
            </div>
            <!--/col-->
            <div class="col-sm-4 col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-thumbnail"><a class="" href="#" title="New Construction"><img src="//placehold.it/600x400/555/FFF" class="img-responsive"></a>
                    </div>
                    <div class="panel-body">
                        <p class="">New Construction</p>
                        <p class=""></p>
                    </div>
                </div>
                <!--/panel-->
            </div>
            <!--/col-->
            <div class="col-sm-4 col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-thumbnail"><a class="" href="#" title="Site Planning"><img src="//placehold.it/600x400/555/EEE" class="img-responsive"></a>
                    </div>
                    <div class="panel-body">
                        <p class="">Site Planning</p>
                        <p class=""></p>
                    </div>
                </div>
                <!--/panel-->
            </div>
            <!--/col-->
            <div class="col-sm-4 col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-thumbnail"><a class="" href="#" title="Churches"><img src="//placehold.it/600x400/666/F4F4F4" class="img-responsive"></a>
                    </div>
                    <div class="panel-body">
                        <p class="">Churches</p>
                        <p class=""></p>
                    </div>
                </div>
                <!--/panel-->
            </div>
            <!--/col-->
        </div>
        <!--/row-->
</div>
<!--/container-->
</pre>

和js脚本如下

/* copy loaded thumbnails into carousel */
$('.panel .img-responsive').on('load', function() {

}).each(function(i) {
  if(this.complete) {
    var item = $('<div class="item"></div>');
    var itemDiv = $(this).parent('a');
    var title = $(this).parent('a').attr("title");

    item.attr("title",title);
    $(itemDiv.html()).appendTo(item);
    item.appendTo('#modalCarousel .carousel-inner'); 
    if (i==0){ // set first item active
     item.addClass('active');
    }
  }
});

/* activate the carousel */
$('#modalCarousel').carousel({interval:false});

/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
  $('.modal-title').html($(this).find('.active').attr("title"));
})

/* when clicking a thumbnail */
$('.panel-thumbnail>a').click(function(e){

    e.preventDefault();
    var idx = $(this).parents('.panel').parent().index();
    var id = parseInt(idx);

    $('#myModal').modal('show'); // show the modal
    $('#modalCarousel').carousel(id); // slide carousel to selected
    return false;
});

所以我将图像从缩略图发送到带有旋转木马的模态窗口。我想要的是为模态中显示的每个图像添加一些文本。谢谢你的帮助。

如何显示带文本的模态窗口和img单击缩略图img

2 个答案: