javascript - 如何使用 JavaScript 显示缩略图并在单击时打开模式

Question

我有数百篇基于 html 的期刊文章，其中包含如下例所示的 html 片段以引用图像:

<div class="fig panel" style="display: float; clear: both">
    <a id="de8adf66-3683-c412-3cd6-45bc686a4ebe"><!-- named anchor --></a>
    <h5 class="label">Innovation attributes</h5>
    <div class="caption">
        <p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
            <i>Adams, 2003.</i>
        </p>
    </div>
    <a id="ID0EHD" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png">
        <div class="long-desc" />
        <a target="xrefwindow" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" id="ID0ELD">https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png</a>
        <div class="permissions">
            <p class="copyright" />
            <p class="copyright">
                <span class="generated">Copyright</span>
            </p>
            <div class="license">
                <p class="first" id="ID0ESD" />
            </div>
        </div>
    </a>
</div>

准备好文档后，使用 JavaScript 和 CSS3 如何显示包含在第一个“a”标签中的缩略图，以及下面的“long-desc”和“权限”div 的内容……然后什么时候单击缩略图，在第二个(子)'a' 标签中以填充屏幕(并有一个关闭按钮)的模式打开图像？

Answer 1

检查一下。您可以根据需要编辑样式。这只是一个草图。

document.addEventListener('DOMContentLoaded', function() {
  let thumbnail = document.querySelector('.thumbnail');
  let close = document.querySelector('.modal-close');
  let overlay = document.querySelector('.overlay');

  thumbnail.addEventListener('click', function(e) {
    e.preventDefault();
    overlay.classList.add('visible')
  });

  close.addEventListener('click', function(e) {
    e.preventDefault();
    overlay.classList.remove('visible')
  });


});

.thumbnail-image {
  border: 3px solid #BBB;
  border-radius: 4px;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.overlay.visible{
display:block;
}

.modal-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}

.modal-image {
  height: calc(100vh / 1.28);
    width: 100vh;
    margin: auto;
}

.modal-image>img {
  max-width: 100%;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px;
  border: 2px solid #444;
  background: #bbb;
  cursor: pointer;
}

<div class="fig panel" style="display: float; clear: both">
  <a id="de8adf66-3683-c412-3cd6-45bc686a4ebe">
    <!-- named anchor -->
  </a>
  <h5 class="label">Innovation attributes</h5>
  <div class="caption">
    <p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
      <i>Adams, 2003.</i>
    </p>
  </div>
  <a id="ID0EHD" href="#" class="thumbnail">
    <img class="thumbnail-image" src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png" alt="show full image" title="show full image" />
  </a>
  <div class="long-desc">
    <div class="permissions">
      <p class="copyright">
        <span class="generated">Copyright</span>
      </p>
      <div class="license">
        <p class="first" id="ID0ESD" />
      </div>
    </div>
  </div>
  <div class="overlay">
    <div class="modal-wrapper">
      <div class="modal-image">

        <img src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" alt="full image" title="full image" />
      </div>
      <div class="modal-close">X</div>
    </div>
  </div>
</div>