时间戳

首页 > 解决方案 > 单击图像后如何使文本与图像一起可见？

javascript - 单击图像后如何使文本与图像一起可见？

问题描述

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

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

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

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

<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-innder” 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 编写代码。

标签： javascriptonclick

解决方案

希望您正在使用 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>

推荐阅读