I have a dozen images on the page, each opening a modal when clicked. Currently, I've created a separate script for each modal. How can I consolidate these scripts into one for all modals?
<!-- 1 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img onclick="myLele(this)" src="https://www.festadellamusicact.it/wp-content/uploads/leletronika.jpg" id="myImg" class="img-responsive"></div>
<div id="lele" class="modal">
<div class="modal-content" id="img11">
<span onclick="undici.style.display = 'none'" class="close">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/33407528_10216104175664929_3838668853781463040_n.jpg" class="img-responsive img-modale"></div>
</div>
<!-- 2 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img onclick="myJessy(this)" src="https://www.festadellamusicact.it/wp-content/uploads/jessy.jpg" id="myImg" class="img-responsive"></div>
<div id="jessy" class="modal">
<div class="modal-content" id="img10">
<span onclick="dieci.style.display = 'none'" class="close">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/29543_497687346938913_28179288_n.jpg" class="img-responsive img-modale"></div>
</div>
<script>
var undici = document.getElementById('lele');
var lele = document.getElementById("img11");
function myLele(el) {
var ImgSrc = el.src;
undici.style.display = "block";
lele.src = ImgSrc;
}
window.onclick = function (event) {
if (event.target == undici) {
undici.style.display = "none";
}
}
var dieci = document.getElementById('jessy');
var jessy = document.getElementById("img10");
function myJessy(el) {
var ImgSrc = el.src;
dieci.style.display = "block";
jessy.src = ImgSrc;
}
window.onclick = function (event) {
if (event.target == dieci) {
dieci.style.display = "none";
}
}
</script>I have explored different approaches but haven't been successful in making multiple modals work on the same page. Is it possible to use a foreach () loop for this purpose?