带有图像描述的模态图像
我在这里找到了有关制作多个模态图像的代码。但是，当我打开模式时，我似乎找不到添加描述文本的最佳方法。我一直在关注这篇文章的第二个到最后一个答案的代码： 页面上的几个模态图像对 我有很大帮助，但我需要描述文本而不是标题文本。如果有人愿意帮助我解决这个问题，将不胜感激。先感谢您！
<body>
<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>
<img class="myImg" 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" width="300" height="200">
<div class="text">The lovely cabins here in Norway was an amazing stay with beautiful scenery...</div>
<img class="myImg" src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway" width="300" height="200">
<div class="text">An afternoon on top of the Norway mountains you get an even more breath taking view..</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div class="text"></div>
</div>
< script >
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;
captionText.innerHTML = this.alt;
}
}
牧羊人nacy
慕虎7371278
相关分类