Как я могу отобразить уменьшенное изображение и открыть модальное по клику, используя 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' и 'permissions' ниже ... а затем, когда щелкают по миниатюре, откройте изображение во втором (дочернем) теге '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>