javascript - 如何在图像中添加全尺寸弹出框？

Question

我使用此代码通过为小型设备、中型设备和大型设备不同地划分列来将六个图像排成一行，如下所示:

<div class="row">
    <div class="col-md-12">
        <center><div class="row" style="padding-right:15px;">

                <div class="col-xs-6 col-sm-4 col-md-2">
                     <img src="images/Icons 2-02.png" style="width:80%;">
                </div>

                <div class="col-xs-6 col-sm-4 col-md-2">
                     <img src="images/Icons 2-03.png" style="width:80%;">
                </div>
                <div class="col-xs-6 col-sm-4 col-md-2">
                     <img src="images/Icons 2-01.png" style="width:80%;">
                </div>
                <div class="col-xs-6 col-sm-4 col-md-2">
                     <img src="images/Icons 2-04.png" style="width:80%;">
                </div>
                <div class="col-xs-6 col-sm-4 col-md-2">
                     <img src="images/Icons 2-05.png" style="width:80%;">
                </div>
                <div class="col-xs-6 col-sm-4 col-md-2">
                     <img src="images/Icons 2-06.png" style="width:80%;">
                </div>
        </div></center>
    </div>
</div>

有人可以帮助我在点击这些图像时获得这些图像的描述吗？如所附图像(由 Photoshop 制作)所示？
单击图像时，整个页面内容应向下移动，并为全窗口宽度的描述腾出空间，并且每当单击其他位置时，描述应消失。
是否可以有图像中所示的精确描述(已制作) by photoshop)附加到这个问题？
This is link to the image as I am new to stackoverflow can't upload image

Answer 1

只需将其添加到每个img data-container="body"data-toggle="popover"data-placement="bottom"data-content="This popover" 并确保添加popover 函数到您的 js 代码 $('img').popover() 请参阅此 PEN

编辑: 要获得弹出窗口的完整 View ，只需使用 css:

.popover{
      max-width: 100%;
    width: 100%;
}