单击图像后如何使文本与图像一起显示？

Question

我正在处理我的在线作品集，我想在单击图像后添加一些文本。 我正在使用引导程序来布局我的投资组合。

现在，当我点击我的投资组合中的一张图片时，它已经打开了另一张图片，但我想在图片下添加一些文字。

我尝试将带有一些文本的 ap 元素放在 div 中，但文本要么在单击之前显示在图片下方，要么显示在图片中。

这是投资组合项目之一的代码：

<a href="img/portfolio/hanno/hanno2.png" class="portfolio-item set-bg" data-setbg="img/portfolio/hanno/hanno.png">
    <div class="pi-inner">
          <h2>+ See Project</h2>
    </div>
</a>
</div>

我尝试将 p 元素放在将所有内容放在一起的 div 中，但没有用。 img/portfolio/hanno/hanno.png 是主屏幕上的图片。 如果我单击图片，img/portfolio/hanno/hanno2.png 将在屏幕中打开。 在这张图片下，我想要一些文字。

我还尝试在“pi-inder”div下添加另一个div，如下所示：

<div class="mix col-lg-6 col-md-6 web">
<a href="img/portfolio/hanno/hanno2.png" class="portfolio-item set-bg" data-setbg="img/portfolio/hanno/hanno.png">
    <div class="pi-inner">
        <h2>+ See Project</h2>
        </div>
        <div id="ShowDiv">
                <p>Hanno insurance website redesign</p>
        </div>
</a>
</div>

我想也许我可以添加一些 javascript，当我单击主屏幕上的图片时，它会显示照片下方（或上方）的文本。 我真的无法弄清楚这是如何工作的，尽管我猜这非常容易。 我有点理解它，但我不知道我应该如何用javascript编写代码。

Answer 1

希望您正在使用 Bootstrap，然后采用以下示例并在您的代码中使用。

 <a href="img/portfolio/hanno/hanno2.png" class="btn btn-info btn-lg portfolio-item set-bg" data-setbg="img/portfolio/hanno/hanno.png" data-toggle="modal" data-target="#myModal"> <!-- Modal --> <div id="myModal" class="modal fade" 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"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>