Código de JavaScript - Simple Modal Crossbrowser

Imágen de perfil

Simple Modal Crossbrowsergráfica de visualizaciones


JavaScript

Publicado el 18 de Octubre del 2016 por ScriptShow
1.038 visualizaciones desde el 18 de Octubre del 2016. Una media de 14 por semana
Un sencillo Light-box ó Modal crossbrowser creado desde cero. Dos funciones JS y CSS es suficiente para conseguir el efecto. No precisa de ninguna librería. Es fácil de adaptar a cualquier proyecto...

Requerimientos

Un navegador web o dispositivo compatible.

1.0

Actualizado el 21 de Octubre del 2016 (Publicado el 18 de Octubre del 2016)gráfica de visualizaciones de la versión: 1.0
1.039 visualizaciones desde el 18 de Octubre del 2016. Una media de 14 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
body {
margin:0px;
font:normal normal 24px/24px sans-serif;
}
#modal {
top:0px;
left:0px;
height:0%;
width:100%;
position:fixed;
overflow:hidden;
background:#000000;
text-decoration:none;
color:#FFFFFF;
z-index:4;
opacity:0.8;
-moz-opacity:0.8;
-khtml-opacity:0.8;
filter:alpha(opacity=80);
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;
transition:all 0.4s;
}
</style>
<script>
function _open() {
document.getElementById("modal").style.height="100%";
}
function _close() {
document.getElementById("modal").style.height="0%";
}
</script>
</head>
<body>
<div id="modal">
<span style="cursor:pointer" onclick="_close()">Close</span>
<h4>C O N T E N I D O - 01</h4>
<small>T E X T O - 01</small>
<h4>C O N T E N I D O - 02</h4>
<small>T E X T O - 02</small>
</div>
<span style="cursor:pointer" onclick="_open()">Open</span>
</body>
</html>



Comentarios sobre la versión: 1.0 (0)


No hay comentarios
 

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3717  
Revisar política de publicidad