带有图像描述的模态图像

Question

带有图像描述的模态图像我在这里找到了有关制作多个模态图像的代码。然而，当我打开模式时，我似乎找不到添加描述文本的最佳方法。我一直在关注这篇文章的第二个到最后一个答案的代码： 页面上的几个模态图像 这对我有很大帮助，但我需要描述文本而不是标题文本。如果有人愿意帮助我解决这个问题，我将不胜感激。先感谢您！代码 ：#myImg {  border-radius: 5px;  cursor: pointer;  transition: 0.3s;}#myImg:hover {  opacity: 0.7;}.modal {  display: none;  /* Hidden by default */  position: fixed;  /* Stay in place */  z-index: 1;  /* Sit on top */  padding-top: 100px;  /* Location of the box */  left: 0;  top: 0;  width: 100%;  /* Full width */  height: 100%;  /* Full height */  overflow: auto;  /* Enable scroll if needed */  background-color: rgb(0, 0, 0);  /* Fallback color */  background-color: rgba(0, 0, 0, 0.9);  /* Black w/ opacity */}.modal-content {  margin: auto;  display: block;  width: 80%;  max-width: 700px;}#text {  margin: auto;  display: block;  width: 80%;  max-width: 700px;  text-align: center;  color: #ccc;  padding: 10px 0;  height: 150px;}.modal-content,#text {  animation-name: zoom;  animation-duration: 0.6s;}@keyframes zoom {  from {    transform: scale(0)  }  to {    transform: scale(1)  }}.close {  position: absolute;  top: 15px;  right: 35px;  color: #f1f1f1;  font-size: 40px;  font-weight: bold;  transition: 0.3s;}.close:hover,.close:focus {  color: #bbb;  text-decoration: none;  cursor: pointer;}@media only screen and (max-width: 700px) {  .modal-content {    width: 100%;  }}</style></head>

Answer 1

您需要在单击后img + text用so 换行，然后按属性选择内部内容并更改 modal 。只需对modalImg.src = this.src 进行小修改即可将modalImg.innerHTML = this.innerHTML; 像下面的片段一样。 我希望下面的片段对您有很大帮助。divwrapped div.innerHTMLimg to div
js code

var modal = document.getElementById('myModal');

// to all images -- note I'm using a class!

var images = document.getElementsByClassName('myImg');

// the image in the modal

var modalImg = document.getElementById("img01");

// and the caption in the modal

var captionText = document.getElementsByClassName("text");

// Go through all of the images with our custom class

for (var i = 0; i < images.length; i++) {

  var img = images[i];

  // and attach our click listener for this image.

  img.onclick = function(evt) {

    modal.style.display = "block";

    // modalImg.src = this.src;

    modalImg.innerHTML = this.innerHTML;

    captionText.innerHTML = this.alt;

  }

}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() {

  modal.style.display = "none";

}

*,*:before, *:after{box-sizing: border-box;}

body{

  margin: 0;

  padding: 0;

  font-family: Arial;

}

.myImg{

  border-radius: 5px;

  cursor: pointer;

  transition: 0.3s;

  display: inline-block;

  vertical-align: top;

  width: 300px;

  min-height: 200px;

}

.myImg:hover {

  opacity: 0.7;

}

.myImg img{

  max-width: 100%;

}

.modal {

  display: none;

  /* Hidden by default */

  position: fixed;

  /* Stay in place */

  z-index: 1;

  /* Sit on top */

  padding-top: 50px;

  /* Location of the box */

  left: 0;

  top: 0;

  width: 100%;

  /* Full width */

  height: 100%;

  /* Full height */

  overflow: hidden;

  overflow-y: auto;

  /* Enable scroll if needed */

  background-color: rgb(0, 0, 0);

  /* Fallback color */

  background-color: rgba(0, 0, 0, 0.9);

  /* Black w/ opacity */

}

.modal-content {

  margin: 0 auto 20px auto;

  display: block;

  width: 80%;

  max-width: 700px;

}

.modal-content img{

  width: 100%;

  display: block;

}

.modal-content .text{

  font-size: 16px;

  color: #f1f1f1;

  padding: 10px;

}

.modal-content{

  animation-name: zoom;

  animation-duration: 0.6s;

}

@keyframes zoom {

  from {

    transform: scale(0)

  }

  to {

    transform: scale(1)

  }

}

.close {

  position: absolute;

  top: 15px;

  right: 35px;

  color: #f1f1f1;

  font-size: 40px;

  font-weight: bold;

  transition: 0.3s;

}

.close:hover,

.close:focus {

  color: #bbb;

  text-decoration: none;

  cursor: pointer;

}

@media only screen and (max-width: 700px) {

  .modal-content {

    width: 100%;

  }

}

<div class="myImg">

  <img src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway">

  <div class="text">The Beautiful mountain over the Norway River was a spectacular view to see..</div>

</div>

<div class="myImg">

  <img src="http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1490029386/fisherman-cabin-hamnoy-lofoten-islands-norway-NORWAY0320.jpg?itok=cpPuUjh1" alt="Fishermen's cabins in Lofoten, Norway">

  <div class="text">The lovely cabins here in Norway was an amazing stay with beautiful scenery...</div>

</div>

<div class="myImg">

  <img src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway">

  <div class="text">An afternoon on top of the Norway mountains you get an even more breath taking view..</div>

</div>

<!-- Modal Elements -->

<div id="myModal" class="modal">

  <span class="close">&times;</span>

  <div class="modal-content" id="img01"></div>

</div>

Answer 2

将图像和文本放在同一个容器中会简单得多。

<div class="image-container">

<img class="myImg" src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway" width="300" height="200">

  <div class="text">The Beautiful mountain over the Norway River was a spectacular view to see..</div>

</div>

然后使用 JavaScript 声明一个名为 modalContent 的变量并选择您的容器。

var modalContent = getElementById('image-container');

它只是简化了一切并减少了所需选择器的数量。查看您的代码，我无法理解每个图像是单独还是全部显示在模式窗口中。我希望这有帮助。