代码之家 › 专栏 › 技术社区 › ProfNimrod

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

css3 html5 javascript

0

ProfNimrod · 技术社区 · 5 年前

我有数百篇基于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>

在document ready上,使用JavaScript和CSS3如何显示第一个“a”标记中包含的缩略图,以及下面的“long desc”和“permissions”div的内容。。。然后单击缩略图时,以填充屏幕的模式打开第二个(子项)“a”标记中的图像(并具有关闭按钮)?

1 回复 | 直到 5 年前

1

Timur Gilauri 5 年前

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>