如何显示一个模态窗口与文本和点击缩略图

How to show a modal window with text and img clicking on a thumbnail img

本文关键字：文本 略图 窗口 一个 何显示 显示 模态      更新时间：2023-09-26

我刚开始使用Bootstrap 3。我用与不同项目相关的图像制作了一个缩略图网格。我想，当点击一个图像模态窗口打开。在模态我需要报告图像来自缩略图和一些解释项目内容的文本。有什么想法，建议怎么做吗?

在Bootstrap中添加模态非常容易，Bootstrap文档中有示例:http://getbootstrap.com/javascript/#modals.

我建议你尝试一些例子，看看你能做到什么程度，然后如果你卡住了，你可以问细节。

我的编码如下

<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;
});

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

相关文章：