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才能正确设置。并非所有浏览器都完全支持它

单击照片以显示信息

2 个答案: