[SOLUCIONADO] Llamar a un div con transiciones mediante css

[speedmethal]

Buenas a tod@s,

estoy intentando cargar un div que hace de ventana emergente. El problema es que cuando lo llamo con el javascript no consigo hacer que el div reproduzca las transiciones que le puse mediante estilos css. He probado con la opción de mostrar/ocultar y el div carga pero solo en el estado inicial, no hace las transiciones.

Alguien sabría decirme qué estoy haciendo mal? igual esto no se puede hacer de esta forma?

Gracias por adelantado.

Saludos

[IsaBelM]

Se trata de darle el valor a la propiedad de la transición, usando el css computado https://developer.mozilla.org/es/doc...tComputedStyle

[Alexis88]

Bienvenido a Foros del Web.

Sin ver lo que tienes hecho, no es posible determinar lo que esté mal, pero solo por si acaso, no todas las propiedades pueden ser afectadas por el efecto de transición.

Aquí puedes ver la lista de propiedades que pueden ser afectadas por dicho efecto.

Un saludo

[speedmethal]

Hola de nuevo.

He estado echando un vistazo a los links que me habéis facilitado y hay una transición que no aparece en la lista (-webkit-transition:). No obstante, dejo el código que tengo a ver si me podéis echar un cable. Mil GRACIAS!!!!

Estilo css:

Código:

<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>

código Javascript:

Código:

<script type='text/javascript'>

  function stopscrollhref(){
     var ventana = document.getElementById('modal1');
     ventana.style.display = 'block';       	
  }
</script>

Div de la ventana emergente:

Código:

<div class='modalmask' id='modal1'>
    <div align='center' class='modalbox movedown'>
        <a class='close' href='#close' title='Close'>X</a>
<div style='width: 100%; height: auto; vertical-align: middle;padding-top:15px;'> 
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=AIngenieros&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
        <table width='100%'>
          <tr>
            <td>
              <input name='email' placeholder='Email address...' style='width:140px;height:20px;' type='text'/>
              <input name='uri' type='hidden' value='AIngenieros'/><input name='loc' type='hidden' value='en_US'/>
            </td>
            <td width='64px'>
             <input class='button-generic' style='width:60px;height:26px;' type='submit' value='ENVIAR'/>
            </td>
          </tr>
        </table>
        <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='en_US'/>
      </form>
    </div>      
</div>
</div>

Para ejecutar el javascript tengo una imagen que llama a la función al hacer click:
El caso es que la llama, pero solo se muestra el estilo .modalmask y se queda ahí "parada"

Código:

<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>

La idea de esto es porque si llamaba al div con el código de abajo la ventana aparecía como yo quería, pero se producía un scroll de la pantalla bastante incómodo.

Código:

<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>

Alguna sugerencia?

De nuevo mil gracias por vuestro tiempo.

Saludos

[IsaBelM]

haz estos cambios
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;
pointer-events: none;
}


.modalmaskshow {
-webkit-transition: opacity 3s ease-in;
-moz-transition: opacity 3s ease-in;
transition: opacity 3s ease-in;
opacity:1;
}

js

function stopscrollhref(){
var ventana = document.getElementById('modal1');
ventana.className = 'modalmaskshow';
}

html

<img alt='' src='http://1.bp.blogspot.com/-E0fmDTqIfEk/VkDog-17ZKI/AAAAAAAAAFY/UHeLmInqaBA/s1600/e-mail.png' style='vertical-align:middle;border:0' onclick='javascript:stopscrollhref()'/>

para efectos algo mas complejos, lee este articulo

[speedmethal]

Buenas tardes IsaBelM.

Decirte que eres una CRACK!!!!!!! con mayúsculas.

Me funciona a las mil maravillas, además he editado un poco los estilos para que reproduzca exactamente lo que quería.

Muchísisisisisimas gracias.

Saludos