Good afternoon.
I am trying to do what is mentioned in the title of this post, only using javascript, create a popup window of the type 'modal' for each IMG tag that exists. In this way, it would be avoided to write by hand each line of html that would call for the creation of a modal window. If you can advise me, I would thank you infinitely. Next I share the structure of my code to visualize the panorama that I face:
// Get the modal
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
figcaption {
text-align: center;
font-weight: 600;
}
// ESTILOS MODAL
/* The Modal (background) */
.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;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.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%;
}
}<div class="container-fluid">
<div class="container">
<div class="row">
<figure class="col-xs-6">
<img src="http://payload496.cargocollective.com/1/22/723588/12222452/prt_320x212_1480296530.jpg" alt="CRANEOPLASTIA" class="img-thumbnail" id="myImg">
<figcaption>CRANEOPLASTÍA</figcaption>
</figure>
<figure class="col-xs-6">
<img src="http://payload496.cargocollective.com/1/22/723588/12221313/prt_320x212_1480272979.JPG" alt="" class="img-thumbnail">
<figcaption>IMPLANTE DE HÚMERO</figcaption>
</figure>
<figure class="col-xs-6">
<img src="http://payload496.cargocollective.com/1/22/723588/12221565/prt_320x212_1480279038.JPG" alt="" class="img-thumbnail">
<figcaption>IMPLANTE A MEDIDA</figcaption>
</figure>
<figure class="col-xs-6">
<img src="http://payload496.cargocollective.com/1/22/723588/12222480/prt_320x212_1480297118.jpg" alt="" class="img-thumbnail">
<figcaption>ESPACIADORES DE CADERA</figcaption>
</figure>
<figure class="col-xs-6">
<img src="http://payload496.cargocollective.com/1/22/723588/12221507/prt_320x212_1480277643.JPG" alt="" class="img-thumbnail">
<figcaption>ESPACIADORES DE RODILLA</figcaption>
</figure>
<figure class="col-xs-6">
<img src="http://payload496.cargocollective.com/1/22/723588/12221473/prt_320x212_1480277280.png" alt="" class="img-thumbnail">
<figcaption>HEMIPELVIS</figcaption>
</figure>
<figure class="col-xs-6">
<img src="http://payload496.cargocollective.com/1/22/723588/12221374/prt_320x212_1480274606.JPG" alt="" class="img-thumbnail">
<figcaption>IMPLANTE DE CADERA</figcaption>
</figure>
<figure class="col-xs-6">
<img src="http://payload496.cargocollective.com/1/22/723588/12221349/prt_320x212_1480275916.JPG" alt="" class="img-thumbnail">
<figcaption>RECONSTRUCCIÓN ACETABULAR</figcaption>
</figure>
<figure class="col-xs-6">
<img src="http://payload496.cargocollective.com/1/22/723588/12221529/prt_320x212_1480278065.JPG" alt="" class="img-thumbnail">
<figcaption>CALCÁNEO-STOP</figcaption>
</figure>
<figure class="col-xs-6">
<img src="http://payload496.cargocollective.com/1/22/723588/12221337/prt_320x212_1480273630.jpg" alt="" class="img-thumbnail">
<figcaption>MANGO PORTA RASPA</figcaption>
</figure>
<figure class="col-xs-6">
<img src="http://payload496.cargocollective.com/1/22/723588/12223920/prt_320x212_1480339976.jpg" alt="" class="img-thumbnail">
<figcaption>CLAVO ARTRODESIS DE RODILLA</figcaption>
</figure>
</div>
</div>
</div>
<!-- Creates the bootstrap modal where the image will appear -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>