Como Hacer que Funcione SOS
Publicado por cesar (36 intervenciones) el 07/08/2020 23:40:56
Esta es la hoja de estilos de una web que estoy diseñando en un tutorial dan el sigiente codigo en un video de youtube y funciona
Lo que hay que hacer es que al ser click en una de las imagenes esta se desplegue y quede sola en la galeria que puse en el programa o codigo html
habra alguna forma de arreglar el programa para que funcione????
Este es el codigo Subrayo la parte en que se basa el codigo Jabascript que no funciona
Hoja de estilos
Lo que hay que hacer es que al ser click en una de las imagenes esta se desplegue y quede sola en la galeria que puse en el programa o codigo html
habra alguna forma de arreglar el programa para que funcione????
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let imagenes= document.querySelectorAll('.gallery__img');
let modal = document.querySelector('#modal');
let img = document.querySelector('#modal__img');
let boton = document.querySelector('#modal__boton');
for (let i = 0; i<imagenes.length; i++){
imagenes[i].addEventListener("click", function(e){
modal.classList.toggle("modal--open");
let src= e.target.src;
img.setAttribute("src", src);
});
}boton.addEventListener("click", function(){
modal.classList.toggle("modal--open");
}});
Este es el codigo Subrayo la parte en que se basa el codigo Jabascript que no funciona
1
2
<script src="modal.js"></script>
</head>
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<body>
<div class="modal" id="modal" >
<div class="modal__content" >
<img src="" alt="" class="modal__img" id="modal__img">
</div>
<div class="modal__boton" id="modal__boton">X</div>
</div>
<header class="main-header">
<div class="container container..flex">
<div class="logo-container column column--50">
<h1 class="logo">Your Restaurant</h1>
</div>
<div class="main-header..contactInfo column column..50">
<p class="main-header__contactInfo__phone">
<div class="icon-phone">999-999-999</div></p>
<p class="main-header__contactInfo__address">
<div class="icon-address">Urb las lunas Inca Peru</div></p>
</div>
</div>
</header>
<nav class="main-nav">
<div class="container container...flex">
<div class="icon-menu" id="btnmenu"></div>
<ul class="menu" id="menu">
<li class="menu__item"><a href="/"class="menu__link">Inicio</a></li>
<li class="menu__item"><a href="nosotros.html"class="menu__link">Nosotros</a></li>
<li class="menu__item"><a href="galeria.html"class="menu__link menu__link--select">Galeria</a></li>
<li class="menu__item"><a href="contacto.html"class="menu__link">Contacto</a></li>
</ul>
<div class="social-icon">
<a href=""class="social_icon__link"><div class="icon-facebook"></div></a>
<a href=""class="social_icon__link"><div class="icon-twitter"></div></a>
<a href=""class="social_icon__link"><div class="icon-mail"></div></a>
</div>
</div>
</nav>
<section class="banner">
<img src="img/g1.jpg" alt="" class="banner__img">
<div class="banner__content">Lo Mejor De Nosotros A Tu Servicio!</div>
</section>
<main class="main">
<div class="group gallery">
<h2 class = "group__title">NUESTRA GALERIA</h2>
<div class="container container--flex">
<div class="column column--50-25">
<img src="img/g2.jpg" alt="" class="gallery__img gallery__img--big">
<img src="img/g4.jpg" alt="" class="gallery__img gallery__img--small">
</div>
<div class="column column--50-25">
<img src="img/g3.jpg" alt="" class="gallery__img gallery__img--small">
<img src="img/g5.jpg" alt="" class="gallery__img gallery__img--big">
</div>
<div class="column column--50-25">
<img src="img/g6.jpg" alt="" class="gallery__img gallery__img--big">
<img src="img/g.jpg" alt="" class="gallery__img gallery__img--small">
</div>
<div class="column column--50-25">
<img src="img/g8.jpg" alt="" class="gallery__img gallery__img--small">
<img src="img/g7.jpg" alt="" class="gallery__img gallery__img--big">
</div>
</div>
</div>
</main>
<footer class = "main-footer">
<div class="container container--flex">
<div class="column column--33">
<h2 class = "column __title"¿Por que visitarnos? > </h2>
<p class = "column __txt"> Sed ut perspiciatis unde omnis iste natus
error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p></p>
</div>
<div class="column column--33">
<h2 class = "column __title"> Contactanos </h2>
<p class = "column __txt"> urb las rosas 123 inca Peru </p>
<p class = "column __txt"> Telefono: 999-999-999 </p>
<p class = "column __txt">consultas@your restaurant.com </p>
</div>
<div class="column column--33">
<h2 class = "column __title"> Siguenos en nuestras Redes </h2>
<p class = "column __txt"> <a href=""class = "icon-facebook">facebook</a></p>
<p class = "column __txt"> <a href=""class = "icon-twitter">siguenos en twitter</a></p>
<p class = "column __txt"> <a href=""class = "icon-youtube">Visita nuestro canal </a></p>
</div>
</main>
<footer class = "main-footer">
<div class="container container--flex">
<div class="column column--33">
<h2 class = "column __title"¿Por que visitarnos? > </h2>
<p class = "column __txt"> Sed ut perspiciatis unde omnis iste natus
error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p></p>
</div>
<div class="column column--33">
<h2 class = "column __title"> Contactanos </h2>
<p class = "column __txt"> urb las rosas 123 inca Peru </p>
<p class = "column __txt"> Telefono: 999-999-999 </p>
<p class = "column __txt">consultas@your restaurant.com </p>
</div>
<div class="column column--33">
<h2 class = "column __title"> Siguenos en nuestras Redes </h2>
<p class = "column __txt"> <a href=""class = "icon-facebook">facebook</a></p>
<p class = "column __txt"> <a href=""class = "icon-twitter">siguenos en twitter</a></p>
<p class = "column __txt"> <a href=""class = "icon-youtube">Visita nuestro canal </a></p>
</div>
<p class = "copy"> 2020 Your Restaurant ! Todos los derechos reservados </p>
</div>
</div>
</footer>
<script src="menu.js"></script>
<script src="modal.js"></script>
</body>
</html>
Hoja de estilos
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
.modal{
width: 100%;
min-height: 100vh;
background: 0,0,0,0.9;
position:fixed; top: 0; left: 0;z-index: 1000000;
display: none; }.modal__content{
display: flex;justify-content: center;
align-items: center;
height: 100vh; }.modal__img {
width: 40%;
} .modal__boton { position: absolute; top: 10px; right:10px; color:white; cursor:pointer;font-weight: bold;
width: 50px; height: 50px;line-height: 50px;
background: #DE423A;
font-size: 2.5em;
text-align: center;
border-radius: 50%;
font-family: monospace;
}.modal--open {
display: none; }Valora esta pregunta
0