多个图像的自举弹出模式

Question

我指的是有关模式图像here的本教程。

该示例显示一个图像，单击该图像会以模态弹出。其中涉及一些JavaScript，但我对JavaScript不太熟悉。

如果不是此行：

<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">

，我有多张图片（例如4张），排列如下：

<img id="myImg1" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<img id="myImg2" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<img id="myImg3" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<img id="myImg4" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">

如何修改此代码（可能还有JavaScript），以便模式弹出窗口显示单击的相应图像？

<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

为每个图像创建一个模态似乎是一种非常粗糙的方法。

谢谢