移动端/平板端点击图片弹出figcaption说明的实现方案咨询

Hey there! Let's tackle this mobile caption issue—your hover-based setup works perfectly on desktop, but touch devices don't have hover, so we need a click-based alternative that shows the caption outside the image. Here's a solution that keeps your desktop experience intact while making it mobile-friendly using Bootstrap's modal (since you're already using Bootstrap):

Step 1: Update Your HTML #

We'll add a reusable Bootstrap modal to display captions on mobile, and store the caption text in a data-caption attribute to avoid duplicate content. We'll also keep the existing figcaption but hide it on mobile with Bootstrap's responsive classes:

<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
  <figure class="cap-left image-caption-trigger" data-caption="The house is a converted farm building featuring traditional wooden shutters and terracotta roof tiles">
    <img src="assets/about/about1.jpg" class="img-fluid">
    <figcaption class="d-none d-md-block">
      The house is a converted farm building featuring traditional wooden shutters and terracotta roof tiles
    </figcaption>
  </figure>
</div>

<!-- Global modal for all image captions (add this once at the bottom of your page) -->
<div class="modal fade" id="imageCaptionModal" tabindex="-1" role="dialog" aria-labelledby="imageCaptionModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <p id="modalCaptionContent"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Step 2: Adjust Your CSS #

We'll keep your existing hover styles for desktop, then add media queries to hide hover-only elements on mobile and make the figure look clickable:

figure {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer; /* Hint to users it's clickable */
}

figcaption {
  position: absolute;
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 10px 20px;
  opacity: 0;
  bottom: 0;
  left: -30%;
  transition: all 0.6s ease; /* Simplified transition syntax */
}

figure:hover figcaption {
  opacity: 0.9;
  left: 0;
  font-size: 1em;
}

figure:before {
  content: "?";
  position: absolute;
  background: rgba(255,255,255,0.75);
  color: black;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  text-align: center;
  font-size: 12px;
  line-height: 24px;
  transition: all 0.6s ease;
  opacity: 0.75;
}

figure:hover:before {
  opacity: 0;
}

.cap-left figcaption {
  bottom: 0;
  left: -30%;
}

.cap-left:hover figcaption {
  left: 0;
}

.cap-left:before {
  bottom: 10px;
  left: 10px;
}

/* Mobile-specific styles */
@media (max-width: 767px) {
  /* Hide the hover-only question mark */
  figure:before {
    display: none;
  }
  /* Hide desktop figcaption on mobile */
  figcaption.d-none.d-md-block {
    display: none !important;
  }
  /* Prevent double-tap zoom on touch devices */
  figure {
    touch-action: manipulation;
  }
}

Step 3: Add the JavaScript #

We'll use jQuery (which you already have included) to listen for clicks on the figure, then populate and show the modal only on mobile screens:

$(document).ready(function() {
  $('.image-caption-trigger').on('click', function(e) {
    const isMobile = $(window).width() <= 767;
    
    if (isMobile) {
      // Grab the caption text from the data attribute
      const captionText = $(this).data('caption');
      // Insert it into the modal
      $('#modalCaptionContent').text(captionText);
      // Show the modal
      $('#imageCaptionModal').modal('show');
      // Prevent any default click behavior
      e.preventDefault();
    }
  });
});

Why This Works #

• Desktop Compatibility: Your original hover effect stays exactly as is—no changes for desktop users.
• Mobile-Friendly: On touch devices, clicking the image opens a Bootstrap modal with the caption, which is easy to read and close.
• Reusable: The single modal works for all your images—just add the image-caption-trigger class and data-caption attribute to any figure.
• Clean: No duplicate caption text thanks to the data-caption attribute.

内容的提问来源于stack exchange，提问作者gridMd