时间戳

首页 > 解决方案 > 单击照片以显示信息

html - 单击照片以显示信息

问题描述

单击照片时是否可以让屏幕弹出一些信息，而不是使用悬停或href？

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

标签： htmlcss

解决方案

您可以尝试打开叠加层或其他模式来显示您需要的信息；尝试这样的事情，点击图像会弹出一个带有一些文本的覆盖：

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>

推荐阅读