带有图像描述的模态图像

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&nbsp;。只需对modalImg.src = this.src&nbsp;进行小修改即可将modalImg.innerHTML = this.innerHTML;&nbsp;像下面的片段一样。&nbsp;我希望下面的片段对您有很大帮助。divwrapped div.innerHTMLimg to divjs codevar modal = document.getElementById('myModal');// to all images -- note I'm using a class!var images = document.getElementsByClassName('myImg');// the image in the modalvar modalImg = document.getElementById("img01");// and the caption in the modalvar captionText = document.getElementsByClassName("text");// Go through all of the images with our custom classfor (var i = 0; i < images.length; i++) {&nbsp; var img = images[i];&nbsp; // and attach our click listener for this image.&nbsp; img.onclick = function(evt) {&nbsp; &nbsp; modal.style.display = "block";&nbsp; &nbsp; // modalImg.src = this.src;&nbsp; &nbsp; modalImg.innerHTML = this.innerHTML;&nbsp; &nbsp; captionText.innerHTML = this.alt;&nbsp; }}var span = document.getElementsByClassName("close")[0];span.onclick = function() {&nbsp; modal.style.display = "none";}*,*:before, *:after{box-sizing: border-box;}body{&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; font-family: Arial;}.myImg{&nbsp; border-radius: 5px;&nbsp; cursor: pointer;&nbsp; transition: 0.3s;&nbsp; display: inline-block;&nbsp; vertical-align: top;&nbsp; width: 300px;&nbsp; min-height: 200px;}.myImg:hover {&nbsp; opacity: 0.7;}.myImg img{&nbsp; max-width: 100%;}.modal {&nbsp; display: none;&nbsp; /* Hidden by default */&nbsp; position: fixed;&nbsp; /* Stay in place */&nbsp; z-index: 1;&nbsp; /* Sit on top */&nbsp; padding-top: 50px;&nbsp; /* Location of the box */&nbsp; left: 0;&nbsp; top: 0;&nbsp; width: 100%;&nbsp; /* Full width */&nbsp; height: 100%;&nbsp; /* Full height */&nbsp; overflow: hidden;&nbsp; overflow-y: auto;&nbsp; /* Enable scroll if needed */&nbsp; background-color: rgb(0, 0, 0);&nbsp; /* Fallback color */&nbsp; background-color: rgba(0, 0, 0, 0.9);&nbsp; /* Black w/ opacity */}.modal-content {&nbsp; margin: 0 auto 20px auto;&nbsp; display: block;&nbsp; width: 80%;&nbsp; max-width: 700px;}.modal-content img{&nbsp; width: 100%;&nbsp; display: block;}.modal-content .text{&nbsp; font-size: 16px;&nbsp; color: #f1f1f1;&nbsp; padding: 10px;}.modal-content{&nbsp; animation-name: zoom;&nbsp; animation-duration: 0.6s;}@keyframes zoom {&nbsp; from {&nbsp; &nbsp; transform: scale(0)&nbsp; }&nbsp; to {&nbsp; &nbsp; transform: scale(1)&nbsp; }}.close {&nbsp; position: absolute;&nbsp; top: 15px;&nbsp; right: 35px;&nbsp; color: #f1f1f1;&nbsp; font-size: 40px;&nbsp; font-weight: bold;&nbsp; transition: 0.3s;}.close:hover,.close:focus {&nbsp; color: #bbb;&nbsp; text-decoration: none;&nbsp; cursor: pointer;}@media only screen and (max-width: 700px) {&nbsp; .modal-content {&nbsp; &nbsp; width: 100%;&nbsp; }}<div class="myImg">&nbsp; <img src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway">&nbsp; <div class="text">The Beautiful mountain over the Norway River was a spectacular view to see..</div></div><div class="myImg">&nbsp; <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">&nbsp; <div class="text">The lovely cabins here in Norway was an amazing stay with beautiful scenery...</div></div><div class="myImg">&nbsp; <img src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway">&nbsp; <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">&nbsp; <span class="close">&times;</span>&nbsp; <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">&nbsp; <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');它只是简化了一切并减少了所需选择器的数量。查看您的代码，我无法理解每个图像是单独还是全部显示在模式窗口中。我希望这有帮助。