Skip to content

Commit 74531ee

Browse files
alemandiazcarlosalemandiazcarlos
committed
modalimagenes completado
1 parent 9a3f332 commit 74531ee

File tree

7 files changed

+443
-0
lines changed

7 files changed

+443
-0
lines changed

‎php/htdocs/web/web-css/00002-sintaxis.php

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,15 @@
5656
margin-bottom: 50px;
5757
}
5858
</style>
59+
<div class="code_modal" id="code_myModal">
60+
<span class="code_close">
61+
×
62+
</span>
63+
<img class="code_img_modal-content" id="code_img01"/>
64+
<div id="code_caption">
65+
</div>
66+
</div>
67+
<link href="css/img_modal.css" rel="stylesheet" type="text/css"/>
5968
<?php include_once 'comp/menu.php';?>
6069
<!-- Sidebar/menu -->
6170
<?php include_once 'comp/nav.php'?>
@@ -786,6 +795,8 @@
786795
<?php include "comp/pie.php";?>
787796
</div>
788797
<?php include "comp/slidebar.php";?>
798+
<script src="js/img_modal.js" type="text/javascript">
799+
</script>
789800
<script type="text/javascript">
790801
Acordeon_Sintaxis();
791802
function Acordeon_Sintaxis(argument) {

‎php/htdocs/web/web-css/Pruebas/image_modal.html

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta content="width=device-width, initial-scale=1" name="viewport"/>
5+
<style>
6+
body {font-family: Arial, Helvetica, sans-serif;}
7+
#code_myImg {
8+
border-radius: 5px;
9+
cursor: pointer;
10+
transition: 0.3s;
11+
}
12+
#code_myImg:hover {
13+
opacity: 0.7;
14+
}
15+
/* The Modal (background) */
16+
17+
.code_modal {
18+
display: none;
19+
/* Hidden by default */
20+
position: fixed;
21+
/* Stay in place */
22+
z-index: 1;
23+
/* Sit on top */
24+
padding-top: 100px;
25+
/* Location of the box */
26+
left: 0;
27+
top: 0;
28+
width: 100%;
29+
/* Full width */
30+
height: 100%;
31+
/* Full height */
32+
overflow: auto;
33+
/* Enable scroll if needed */
34+
background-color: rgb(0, 0, 0);
35+
/* Fallback color */
36+
background-color: rgba(0, 0, 0, 0.9);
37+
/* Black w/ opacity */
38+
}
39+
/* Modal Content (image) */
40+
41+
.code_img_modal-content {
42+
margin: auto;
43+
display: block;
44+
width: 80%;
45+
max-width: 700px;
46+
}
47+
/* code_Caption of Modal Image */
48+
49+
#code_caption {
50+
margin: auto;
51+
display: block;
52+
width: 80%;
53+
max-width: 700px;
54+
text-align: center;
55+
color: #ccc;
56+
padding: 10px 0;
57+
height: 150px;
58+
}
59+
/* Add Animation */
60+
61+
.code_img_modal-content,
62+
#code_caption {
63+
-webkit-animation-name: zoom;
64+
-webkit-animation-duration: 0.6s;
65+
animation-name: zoom;
66+
animation-duration: 0.6s;
67+
}
68+
@-webkit-keyframes zoom {
69+
from {
70+
-webkit-transform: scale(0)
71+
}
72+
to {
73+
-webkit-transform: scale(1)
74+
}
75+
}
76+
@keyframes zoom {
77+
from {
78+
transform: scale(0)
79+
}
80+
to {
81+
transform: scale(1)
82+
}
83+
}
84+
/* The code_Close Button */
85+
86+
.code_close {
87+
position: absolute;
88+
top: 15px;
89+
right: 35px;
90+
color: #f1f1f1;
91+
font-size: 40px;
92+
font-weight: bold;
93+
transition: 0.3s;
94+
}
95+
.code_close:hover,
96+
.code_close:focus {
97+
color: #bbb;
98+
text-decoration: none;
99+
cursor: pointer;
100+
}
101+
/* 100% Image Width on Smaller Screens */
102+
103+
@media only screen and (max-width: 700px) {
104+
.code_img_modal-content {
105+
width: 100%;
106+
}
107+
}
108+
</style>
109+
</head>
110+
<body>
111+
<img alt="Snow" id="code_myImg" src="../img/00002/comentarios/00001.png" style="width:100%;max-width:300px"/>
112+
<!-- The Modal -->
113+
<div class="code_modal" id="code_myModal">
114+
<span class="code_close">
115+
×
116+
</span>
117+
<img class="code_img_modal-content" id="code_img01">
118+
<div id="code_caption">
119+
</div>
120+
</img>
121+
</div>
122+
<script>
123+
// Get the modal
124+
let modal = document.getElementById("code_myModal");
125+
126+
// Get the image and insert it inside the modal - use its "alt" text as a code_caption
127+
let img = document.getElementById("code_myImg");
128+
let modalImg = document.getElementById("code_img01");
129+
let code_captionText = document.getElementById("code_caption");
130+
131+
img.onclick = function() {
132+
modal.style.display = "block";
133+
modalImg.src = this.src;
134+
// code_captionText.innerHTML = this.alt;
135+
}
136+
137+
// Get the <span> element that code_closes the modal
138+
let span = document.getElementsByClassName("code_close")[0];
139+
140+
// When the user clicks on <span> (x), code_close the modal
141+
span.onclick = function() {
142+
modal.style.display = "none";
143+
}
144+
</script>
145+
</body>
146+
</html>

‎php/htdocs/web/web-css/Pruebas/modal_imagen/css.css

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
#code_myImg {
2+
border-radius: 5px;
3+
cursor: pointer;
4+
transition: 0.3s;
5+
}
6+
#code_myImg:hover {
7+
opacity: 0.7;
8+
}
9+
/* The Modal (background) */
10+
11+
.code_modal {
12+
display: none;
13+
/* Hidden by default */
14+
position: fixed;
15+
/* Stay in place */
16+
z-index: 1;
17+
/* Sit on top */
18+
padding-top: 100px;
19+
/* Location of the box */
20+
left: 0;
21+
top: 0;
22+
width: 100%;
23+
/* Full width */
24+
height: 100%;
25+
/* Full height */
26+
overflow: auto;
27+
/* Enable scroll if needed */
28+
background-color: rgb(0, 0, 0);
29+
/* Fallback color */
30+
background-color: rgba(0, 0, 0, 0.9);
31+
/* Black w/ opacity */
32+
}
33+
/* Modal Content (image) */
34+
35+
.code_img_modal-content {
36+
margin: auto;
37+
display: block;
38+
width: 80%;
39+
max-width: 700px;
40+
}
41+
/* code_Caption of Modal Image */
42+
43+
#code_caption {
44+
margin: auto;
45+
display: block;
46+
width: 75%;
47+
max-width: 700px;
48+
text-align: center;
49+
color: #ccc;
50+
padding: 10px 0;
51+
height: 150px;
52+
}
53+
/* Add Animation */
54+
55+
.code_img_modal-content,
56+
#code_caption {
57+
-webkit-animation-name: zoom;
58+
-webkit-animation-duration: 0.6s;
59+
animation-name: zoom;
60+
animation-duration: 0.6s;
61+
}
62+
@-webkit-keyframes zoom {
63+
from {
64+
-webkit-transform: scale(0)
65+
}
66+
to {
67+
-webkit-transform: scale(1)
68+
}
69+
}
70+
@keyframes zoom {
71+
from {
72+
transform: scale(0)
73+
}
74+
to {
75+
transform: scale(1)
76+
}
77+
}
78+
/* The code_Close Button */
79+
80+
.code_close {
81+
position: absolute;
82+
top: 15px;
83+
right: 35px;
84+
color: #f1f1f1;
85+
font-size: 40px;
86+
font-weight: bold;
87+
transition: 0.3s;
88+
}
89+
.code_close:hover,
90+
.code_close:focus {
91+
color: #bbb;
92+
text-decoration: none;
93+
cursor: pointer;
94+
}
95+
/* 100% Image Width on Smaller Screens */
96+
97+
/*@media only screen and (max-width: 700px) {
98+
.code_img_modal-content {
99+
width: 100%;
100+
}
101+
}*/

‎php/htdocs/web/web-css/Pruebas/modal_imagen/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6+
<link href="css.css" rel="stylesheet" type="text/css"/>
7+
<title>
8+
Document
9+
</title>
10+
</head>
11+
<body>
12+
<img alt="Snow" src="../../../../img/tux/013.png" style="width:100%;max-width:300px"/>
13+
<img alt="Snow" src="../../../../img/tux/014.png" style="width:100%;max-width:300px"/>
14+
<img alt="Snow" src="../../../../img/tux/018.png" style="width:100%;max-width:300px"/>
15+
<img alt="Snow" src="../../../../img/tux/017.png" style="width:100%;max-width:300px"/>
16+
<img alt="Snow" src="../../../../img/tux/016.png" style="width:100%;max-width:300px"/>
17+
<img alt="Snow" src="../../../../img/tux/015.png" style="width:100%;max-width:300px"/>
18+
<!-- The Modal -->
19+
<div class="code_modal" id="code_myModal">
20+
<span class="code_close">
21+
×
22+
</span>
23+
<img class="code_img_modal-content" id="code_img01"/>
24+
<div id="code_caption">
25+
</div>
26+
</div>
27+
</body>
28+
</html>
29+
<script src="js.js" type="text/javascript">
30+
</script>

‎php/htdocs/web/web-css/Pruebas/modal_imagen/js.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
function code_aplica_modal_img(argument) {
2+
// Get the modal
3+
let modal = document.getElementById("code_myModal");
4+
5+
// Get the image and insert it inside the modal - use its "alt" text as a code_caption
6+
// let img = document.getElementById("code_myImg");
7+
let img = document.querySelectorAll("img");
8+
let modalImg = document.getElementById("code_img01");
9+
let code_captionText = document.getElementById("code_caption");
10+
for (var i = 0; i < img.length; i++) {
11+
img[i].addEventListener("click", function() {
12+
modal.style.display = "block";
13+
modalImg.src = this.src;
14+
// code_captionText.innerHTML = this.alt;
15+
});
16+
}
17+
18+
// Get the <span> element that code_closes the modal
19+
let span = document.getElementsByClassName("code_close")[0];
20+
21+
// When the user clicks on <span> (x), code_close the modal
22+
span.onclick = function() {
23+
modal.style.display = "none";
24+
}
25+
}
26+
27+
code_aplica_modal_img();

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy