点击照片显示信息[关闭]

Question

是否有可能在点击照片时，屏幕上弹出一些信息，而不是使用悬停或href？

它用于显示有关网站上显示的人员的一些额外信息。

Answer 1

您可以尝试打开叠加层或其他模态以显示所需的信息;尝试这样的事情，点击图像会显示一些带有文字的叠加层：

document.querySelector('#image').onclick = function() {
  document.querySelector('.overlay').classList.toggle('show')
}

document.querySelector('.overlay').onclick = function() {
  document.querySelector('.overlay').classList.toggle('show')
}

.overlay {
  background-color: #000;
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.6;
  display: none;
  color: #FFF;
}

.show {
  display: block !important;
}

<img src="https://via.placeholder.com/150" class="image" id="image" />
<div class="overlay">
  <p>
    Your content would go here
  </p>
</div>

Answer 2

这是不可能的。它只能在Javascript的帮助下完成（这些脚本通常需要一些关于显示内容的信息）

没有“最佳”插件，所以如果你搜索“lightbox javascript”，你会发现很多解决方案，一些jquery插件和一些独立的解决方案。使用一个适合您需求的脚本，几乎每个脚本都可以根据其外观进行调整，它们大多不同于实现方法或它们的行为方式/功能。

您也可以尝试使用HTML5中的dialog元素，但这也需要Javascript才能正确设置。每个浏览器也不完全支持它