Como separar el contenido de una pagina web
Publicado por Salvador (3 intervenciones) el 22/12/2018 18:34:00
Buenas tardes, estoy estudiando informática y como uno de mis primeros proyectos, me han mandado a hacer una página con html, css y javascript donde debemos separar por archivos el contenido de cada uno de ellos por ejemplo si quiero poner un texto, el texto en sí lo programo con un archivo de html, el estilo con uno de css y la función que cumpla con uno de javascript, Pues bien, tengo esto:
como ejemplo para hacer una cosa y no puedo separar el javascript del html, ¿Cómo lo hago?
¿Cómo separo la parte de la imagen y el modal con la de la función de javascript?
Gracias de antemano
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
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;transition: 0.3s;
}#myImg:hover {opacity: 0.7;}
/* 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 (image) */.modal-content {
margin: auto; display: block;width: 80%;
max-width: 700px;
}/* Caption of Modal Image */#caption {
margin: auto; display: block;width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0; height: 150px;}/* Add Animation */.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.1)}
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;}/* 100% Image Width on Smaller Screens */@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}}</style>
</head>
<body>
<img id="myImg" src="img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">
<!-- The Modal --><div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
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";
}</script>
</body>
</html>
como ejemplo para hacer una cosa y no puedo separar el javascript del html, ¿Cómo lo hago?
¿Cómo separo la parte de la imagen y el modal con la de la función de javascript?
Gracias de antemano
Valora esta pregunta
0
