我怎么能创建一个带有图像的模态,模态的链接就是图像本身(在较小的版本上))

Question

我想在缩略图库中显示一些图像,如果单击图像,它将在模态中显得更大.

如果我将模态的链接保留为图像,那么除了右上角的关闭符号之外,它不会在页眉或页脚显示任何内容.

我正在使用bootstrap.我还想知道我是否可以将img标签替换为<a>标签以打开模态部分.请帮忙.

这是代码:

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <img id="image-modal" class="img-responsive img-rounded" src="<?php echo base_url();?>img/Desert.jpg" data-target="#myModal" data-toggle="modal" alt="">
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <img class="img-responsive" src="<?php echo base_url();?>img/Desert.jpg" alt="">
                    </div>
                    <div class="modal-footer">
                        <p>This is footer</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

您只能使用 Bootstrap 来完成此操作，但这似乎对您想做的事情有帮助： https: //blueimp.github.io/Bootstrap-Image-Gallery/

我在我的几个网站上使用它正是为了这种情况。