Javascript 具有图像描述的模态图像

具有图像描述的模态图像

我在这里找到了关于制作多模态图像的代码。 然而，当我打开模式时，我似乎找不到添加描述文本的最佳方法。我一直遵循2号的代码，直到最后一个答案： 这对我帮助很大，但我需要的是描述文本而不是标题文本。 如果有人愿意帮助我解决这个问题，我们将不胜感激。 提前谢谢你

代码：

#myImg{
边界半径：5px；
光标：指针；
过渡：0.3s；
}
#myImg:悬停{
不透明度：0.7；
}
.莫代尔{
显示：无；
/*默认情况下隐藏*/
位置：固定；
/*原地不动*/
z指数：1；
/*坐在上面*/
填充顶部：100px；
/*盒子的位置*/
左：0；
排名：0；
宽度：100%；
/*全宽*/
身高：100%；
/*全高*/
溢出：自动；
/*如果需要，启用滚动*/
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,0.9）；
/*黑色w/不透明度*/
}
.模态内容{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
}
#正文{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
文本对齐：居中；
颜色：#ccc；
填充：10px0；
高度：150像素；
}
.模态内容，
#正文{
动画名称：缩放；
动画持续时间：0.6s；
}
@关键帧缩放{
从{
变换：缩放（0）
}
到{
变换：缩放（1）
}
}
.结束{
位置：绝对位置；
顶部：15px；
右：35px；
颜色：#f1f1；
字体大小：40px；
字体大小：粗体；
过渡：0.3s；
}
.关闭：悬停，
.结束：聚焦{
颜色：#bbb；
文字装饰：无；
光标：指针；
}
@仅介质屏幕和（最大宽度：700px）{
.模态内容{
宽度：100%；
}
}

挪威河上那座美丽的山是一个壮观的景色。。
挪威这里可爱的小木屋风景优美，令人惊叹。。。
一个下午，在挪威的山顶上，你可以看到更加令人叹为观止的景色。。
&时代；

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

<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>

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

---

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

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

<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>

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

---

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

您需要使用

div

包装

img+文本

，因此在单击

wrapped div

之后，然后通过

.innerHTML

属性选择内部内容，并将modal

img更改为div

只需对您的

js代码

modalImg.src=this.src到modalImg.innerHTML=this.innerHTML进行少量修改
类似于下面的代码片段

我希望下面的片段能对你们有所帮助

var modal=document.getElementById（'myModal'）；
//对于所有图像--请注意，我使用的是一个类！
var images=document.getElementsByClassName（'myImg'）；
//情态动词中的意象
var modalImg=document.getElementById（“img01”）；
//以及模态中的标题
var captionText=document.getElementsByClassName（“text”）；
//使用我们的自定义类浏览所有图像
对于（var i=0；i

*，*：之前，*：之后{框大小：边框框；}
身体{
保证金：0；
填充：0；
字体系列：Arial；
}
myImg先生{
边界半径：5px；
光标：指针；
过渡：0.3s；
显示：内联块；
垂直对齐：顶部；
宽度：300px；
最小高度：200px；
}
.myImg:悬停{
不透明度：0.7；
}
.myImg img{
最大宽度：100%；
}
.莫代尔{
显示：无；
/*默认情况下隐藏*/
位置：固定；
/*原地不动*/
z指数：1；
/*坐在上面*/
填充顶部：50px；
/*盒子的位置*/
左：0；
排名：0；
宽度：100%；
/*全宽*/
身高：100%；
/*全高*/
溢出：隐藏；
溢出y：自动；
/*如果需要，启用滚动*/
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,0.9）；
/*黑色w/不透明度*/
}
.模态内容{
保证金：0自动20px自动；
显示：块；
宽度：80%；
最大宽度：700px；
}
.模态内容{
宽度：100%；
显示：块；
}
.模态内容.文本{
字体大小：16px；
颜色：#f1f1；
填充：10px；
}
.模态内容{
动画名称：缩放；
动画持续时间：0.6s；
}
@关键帧缩放{
从{
变换：缩放（0）
}
到{
变换：缩放（1）
}
}
.结束{
位置：绝对位置；
顶部：15px；
右：35px；
颜色：#f1f1；
字体大小：40px；
字体大小：粗体；
过渡：0.3s；
}
.关闭：悬停，
.结束：聚焦{
颜色：#bbb；
文字装饰：无；
光标：指针；
}
@仅介质屏幕和（最大宽度：700px）{
.模态内容{
宽度：100%；
}
}

挪威河上那座美丽的山是一个壮观的景色。。
挪威这里可爱的小木屋风景优美，令人惊叹。。。
一个下午，在挪威的山顶上，你可以看到更加令人叹为观止的景色。。
&时代；

您需要使用

div

包装

img+文本

，因此在单击

wrapped div

后，然后通过

.innerHTML

属性选择内部内容，并将模态

img更改为div

J