Crear modal con javascript por cada imagen que existe
Publicado por Nicolás (1 intervención) el 20/09/2017 00:27:17
Muy buenas tardes.
Me encuentro intentando realizar lo mencionado en el título de este post, únicamente mediante javascript, crear una ventana emergente del tipo 'modal' por cada etiqueta IMG que exista. De esta forma, se evitaría redactar a mano cada línea de html que llamaría a la creación de una ventana modal. Si me pueden asesorar se los agradecería infinitamente.
A continuación comparto la estructura de mi código para visualizar el panorama que enfrento:
HTML
CSS
JAVASCRIPT
Me encuentro intentando realizar lo mencionado en el título de este post, únicamente mediante javascript, crear una ventana emergente del tipo 'modal' por cada etiqueta IMG que exista. De esta forma, se evitaría redactar a mano cada línea de html que llamaría a la creación de una ventana modal. Si me pueden asesorar se los agradecería infinitamente.
A continuación comparto la estructura de mi código para visualizar el panorama que enfrento:
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<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>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
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%;
}
}
JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 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";
}
Valora esta pregunta
0