Javascript que desencadene estilos css
Publicado por Rodrigo (1 intervención) el 12/11/2015 12:13:54
Buenos días
Estoy escribiendo un blog, soy novato en esto y tengo conocimientos básicos de html y js así que os pido un poquito de comprensión jeje. Quiero hacer aparecer una ventana flotante con transiciones mediante estilos css que esta contenida en un DIV al hacer click sobre una imagen y que estos estilos css se cargen mediante una función js. Me explico.
Los estilos css incluidos entre <head></head> son estos:
Al principio tenía el siguiente código HTML para el enlace de la página:
El DIV que contiene la ventana no estaba oculto ni nada, eso lo conseguía con el estilo css de opacity:0;
Este código funcionaba bien, hacía lo que quería salvo por una cosa; con '#modal1' la pantalla hacia un scroll bastante incómodo; además, a la URL de la página se añadía /#modal1. Así que para eliminar esto vi, que no sé si es la mejor solución, esta otra opción:
El código de js que he creado es:
Con este se ejecuta un js que lo que hace es llamar al DIV, pero aquí empiezan mis desventuras. utilizo lo que he venido encontrando de mostra/ocultar DIV, y funciona en parte ya que los efectos debidos a la transición no se ejecutan. simplemente se muestra el DIV en cuya etiqueta puse style='display:none;'
El DIV que contiene la ventana flotante es el siguiente, añadiendo style='display:none;' con el código que ejecuta el js.
Alguien me podría decir como puedo hacer cargar los efectos de transición de la capa creada con css mediante una función de javascript o alguna otra alternativa. El resultado que al final busco es hacer aparecer la ventana flotante con la transición sin más, nada de scrolling de la pantalla o adición de código a la URL de la página.
Gracias por adelantado y saludos.
Estoy escribiendo un blog, soy novato en esto y tengo conocimientos básicos de html y js así que os pido un poquito de comprensión jeje. Quiero hacer aparecer una ventana flotante con transiciones mediante estilos css que esta contenida en un DIV al hacer click sobre una imagen y que estos estilos css se cargen mediante una función js. Me explico.
Los estilos css incluidos entre <head></head> son estos:
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
<style type='text/css'>
.modalmask {
position: absolute;font-family: Arial, sans-serif;
top: 0; right: 0; bottom: 0; left: 0;background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;-webkit-transition: opacity 300ms ease-in;
-moz-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
pointer-events: none;
}.modalmask:target {
opacity:1;pointer-events: auto;
}.modalbox{
width: 210px; position: relative; padding: 15px 15px 10px 15px;background: #fff;
border-radius:3px;
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
transition: all 400ms ease-in;
}.modalmask:target .movedown{
margin-top:10%;
}.movedown {
margin: 0 auto;}.close {
background: #fff;
color: #fff;
line-height: 25px;
position: absolute; right: 1px;text-align: center;
top: 1px; width: 24px;text-decoration: none;
font-weight: bold;
border-radius:3px;
}.close:hover {
background: #FAAC58;
color:#222;
}</style>
Al principio tenía el siguiente código HTML para el enlace de la página:
1
<a href='#modal1'><img alt='' src='http://1.bp.blogspot.com/-E0fmDTqIfEk/VkDog-17ZKI/AAAAAAAAAFY/UHeLmInqaBA/s1600/e-mail.png' style='vertical-align:middle;border:0'/></a>
El DIV que contiene la ventana no estaba oculto ni nada, eso lo conseguía con el estilo css de opacity:0;
Este código funcionaba bien, hacía lo que quería salvo por una cosa; con '#modal1' la pantalla hacia un scroll bastante incómodo; además, a la URL de la página se añadía /#modal1. Así que para eliminar esto vi, que no sé si es la mejor solución, esta otra opción:
1
<a href='javascript://' onclick='javascript:stopscrollhref()'><img alt='' src='http://1.bp.blogspot.com/-E0fmDTqIfEk/VkDog-17ZKI/AAAAAAAAAFY/UHeLmInqaBA/s1600/e-mail.png' style='vertical-align:middle;border:0'/></a>
El código de js que he creado es:
1
2
3
4
5
6
<script type='text/javascript'>
function stopscrollhref(){
var ventana = document.getElementById('modal1');
ventana.style.display = 'block';
}</script>
Con este se ejecuta un js que lo que hace es llamar al DIV, pero aquí empiezan mis desventuras. utilizo lo que he venido encontrando de mostra/ocultar DIV, y funciona en parte ya que los efectos debidos a la transición no se ejecutan. simplemente se muestra el DIV en cuya etiqueta puse style='display:none;'
El DIV que contiene la ventana flotante es el siguiente, añadiendo style='display:none;' con el código que ejecuta el js.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id='modal1' class='modalmask'>
<div align='center' class='modalbox movedown'>
<a class='close' href='#close' title='Close'>X</a>
<h2>DESLIZAR</h2>
<div style='width: 100%; height: auto; vertical-align: middle;'>
<form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='"window.open("https://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + "", "popupwindow", "scrollbars=yes,width=550,height=520"); return true"' method='post' target='popupwindow'>
<table width='100%'>
<tr>
<td>
<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
</td>
<td width='64px'>
<input class='follow-by-email-submit' type='submit' value='Submit'/>
</td>
</tr>
</table>
<input expr:value='data:feedPath' name='uri' type='hidden'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</div>
</div>
Alguien me podría decir como puedo hacer cargar los efectos de transición de la capa creada con css mediante una función de javascript o alguna otra alternativa. El resultado que al final busco es hacer aparecer la ventana flotante con la transición sin más, nada de scrolling de la pantalla o adición de código a la URL de la página.
Gracias por adelantado y saludos.
Valora esta pregunta
0