JMiur [E]

Una ventana modal no es algo tan sofisticado como uno cree. Bueno, en realidad, muchas de ellas lo son pero, el concepto básico para generar una ventana modal es sencillo y si no queremos nada excesivamente complejo ni con muchas opciones, crear una propia no es cosa de magia negra sino de entender dos o tres conceptos elementales y ... probar a ver qué sale.

Cuando hablamos de ventanas modales no debemos confundirnos con las ventanas de tipo pop-up que se generan con JavaScript y que no son otra cosa que una instancia del mismo navegador al que abrimos en una ventana nueva con cierta dimensión y en cierta posición.

Algo así, abriría Google en una ventana de 800x450 ubicada a 100 pixeles del ángulo superior izquierdo de la pantalla:
window.open("URL", "", "width=800,height=400,menubar=0,toolbar=0,directories=0,scrollbars=no,resizable=no,left=100,top=100");
Seguramente, en la web podran verse muchos scripts que crean este tipo de ventanas y allí suelen agregar algo más, la posibilidad de centrar esa ventana, calculando los valores de left y top:
x = (screen.width / 2) - (ancho/2);
y = (screen.height / 2) - (alto/2);
window.open("URL", "", "width=800,height=400,menubar=0,toolbar=0,directories=0,scrollbars=no,resizable=no,left= "+ x + ",top=" + y +"");

Pero, una ventana modal no es igual, es algo muchísimo más ... ¿simple? Una ventana modal es ... un DIV, es decir, un rectangulo que contiene cosas, una etiqueta HTML como cualquier otra de nuestro sitio.

¿Y que la hace aparentemente distinta? Nada en particular, no hay propiedades especiales, simplemente, se agrega al final de la página y permanece allí, oculta, hasta tanto se la requiere así que voy a empezar a crear mi ventana modal colocando el HTML justo antes de </body>:
<div id='MVM'>
  <div id='MVM-inner'>
    <div id='MVM-contenido'> </div>
  </div>
</div>
Sí, Ya sé, dije un DIV y ahi hay tres pero eso es sólo para ya tener preparado todo y luego poder agregarle contenidos diversos con más facilidad.

Puesto eso, no pasará absolutamente nada, no veremos nada porque no hay ninguna clase de contenido y, salvo que nosotros hayamos indicado lo contrario, las etiquetas DIV no poseen propiedades de estilo por defecto así que le pondremos algunas.
<style>
  #MVM {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    z-index: 10000;
  }
  #MVM-inner {
    position: relative;
  }
  #MVM-contenido {
    height: 100%;
    width 100%;
  }
</style>
Seguimos sin ver nada porque no hay nada que ver así que para probar, provisoriamente, le agregaré un color de fondo y le daré una dimensión cualquiera:
#MVM-contenido {background-color:#FFF; height:200px; width:300px; }
Y usaré un script para mostrarla con un click:
<script>
function mostrarMVM() {
  MVM.style.visibility = "visible";
}
</script>
<a href="javascript:mostrarMVM()"> mostrar ventana modal </a>

¿Han hecho click y no pasa nada? Pués no es así, la ventana modal está arriba.

¿Por qué está arriba y a la izquierda? Porque eso es lo que hemos definido, que su posición sea absoluta y, como no está contenida dentro de otra etiqueta excepto el body mismo, left y top cero son el ángulo superior izquierdo de la ventana del navegador.

Entonces, ¿podemos centrarla igual que una ventana pop-up? Vemos qué pasa si usamos el ancho y alto de la pantalla y un poco de aritmética para establecemos los valores de left y top:
var ancho = 300;
var alto=200;
var x = (screen.width / 2)-(ancho / 2);
var y = (screen.height / 2) - (alto / 2);
MVM.style.left = x + "px";
MVM.style.top = y + "px";

¿Y tampoco se ve? Pués, allí está, sigue arriba aunque, esta vez, se ha centrado bien horizontalmente si el navegador está a pantala completa pero no verticalmente; y si el navegador no está en pantalla completa, se verá descentrada horizontalmente (corrida hacia la derecha).

En realidad, se ha centrado pero ese centro es el centro de la pantalla del monitor y no el centro de la ventana del navegador; nosotros, no estamos en la parte superior de la página sino bastante más abajo salvo que tengamos un monitor con una resolución gigante y, como decía antes, si el navegador no ocupa toda la pantalla, su ancho es otro.

Como en tantos otros casos de diseño web, el ancho es sencillo de resolver y JavaScript nos provee de ese dato pero, el alto siempre es un problema porque depende pura y exclusivamente del contenido. La altura del BODY no suele coincidir con la altura de la ventana del navegador y por lo general es mucho mayor, por eso aparece una barra de desplazameinto vertical, para que podamos hacer scroll a lo largo del documento, es decir, a lo largo del BODY de nuestra página.

Una de las claves de las ventanas modales es conseguir justamente eso, determinar la posición de la página donde estamos y mostrarse centrada allí, sin importar si estamos arriba, abajo o en cualquier parte.

Es verdad que si yo cambiara la propiedad position: absolute; por position: fixed; la altura no sería un inconveniente pero el ancho seguiría siendo erróneo si el navegador no está maximizado. Además, dependiendo del contenido, esto podría llegar a ser molesto ya que la ventana quedaría "clavada" así que seguiremos buscando otras forma de conseguir lo mismo.

<script>
function toggleMVM() {
  var MVM = document.getElementById("MVM");
  if(MVM.style.visibility == "visible") {
    MVM.style.visibility = "hidden";
  } else {
    MVM.style.visibility = "visible";
  }
}
</script>
<a href="javascript:toggleMVM()"> toggle ventana modal </a>

22 comentarios:

Paula  

Jorge, tu manera de transmitir conocimiento es tan didáctica, que el placer de aprender contigo es inmenso. Como suele decirse, me saco el sombrero... :D

Responder
el Zambullista  

Hola, JMiur, vuelvo a molestarte. En un blog de galerías de imágenes venía usando sin problemas Image Thumbnail Viewer II, un script de Dynamic Drive, hasta hoy. El problema no creo que sea atribuible a la galería, sino a alguna automatización nueva (e intrusiva, para mi gusto) de Blogger (ponele). El asunto es que desde hoy, cuando hago click en una miniatura de cualquier galería, se abre una ventana modal con la foto arriba y al pie todas las miniaturas de la galería (convertidas en cuadradas), con el link de la foto activa a la izquierda, precedido por un texto en español ("Imagen de..."; de ahí que no sospeche de la angloparlante Dynamic Drive). ¿Hay algún modo de evitar o anular esa ventana modal no deseada e impuesta, que estropea a la fuerza las decisiones estéticas que uno pueda haber tomado?
Gracias, y perdón por lo palabrero del comentario.

Responder
Yhonny E.  

Buenas Sr JMiur. Se este no es el post indicado para mi consulta, pero quisiera me ayudara porfavor, sere breve. Me gustaria añadir widgets debajo de los post y encima, asi tambien en la barra lateral y debajo del encabezado en mi blog, eso sin restablecer los artilugios en la plantilla diseño, no quiero que pierda los efectos, como las imagenes de las barras ni las fuentes. Gracias por su atencion. Un abrazo.

Mi blog es identico a este http://www.aulamusical.blogspot.com/ solo que lo tengo en privado por ahora

Responder
el Zambullista  

Hola de nuevo. Por lo que pude averiguar, el problema de las imágenes de un post mostradas a la fuerza en una ventana modal está relacionado con un link de Blogger a una hoja de estilo de Lightbox que se inserta en el código fuente, lo quieras o no: http://www.blogger.com/static/v1/widgets/3353720152-widget_css_lightbox_bundle.css

Ay, Blogger, Blogger...

Responder
Manfenix  

Como siempre JMiur, haciendo sencillas las cosas complejas, :)
Saludos.

Responder
Curu-Curu  

hola, disculpa se que esta pregunta no tiene nada que ver con el post (quizas) pero...

Vos no sabrias decirme como hacer posible el efecto de esta plantilla?

http://btemplates.com/2010/blogger-template-tequilas-flamejantes/

osea mostrar los posts solo con una imagen y el titulo o parecido.


desde ya muchas gracias ^^ que tengas lindo dia :)

Responder
el Zambullista  

En el Foro de Ayuda de Blogger, Vku, que no es de Blogger, escribió un script para solucionar transitoriamente el problema de las imágenes que abren en una ventana modal porque a Blogger así le pintó. Vku advierte que su script puede funcionar dependiendo "de las imágenes que tengan". A mí me funcionó.

Responder
Karla  

JMiur, ya vistes que Blogger ha habilitado una ventana modal para mostrar las imágenes de las entradas, increíble!, lo voy descubriendo en mi blog, de forma accidental al hacer click sobre una imagen, que cool!!

Sabes que por un momento pensé que se había instalado algo tipo cooliris, entre tantas cosas que bajo, pero el código fuente no miente y el asunto viene desde Blogger...

ah!! ...super...!!!

Responder
JMiur  

Gracias, Paula :D

Yhonny E
¿Y que inconveniente tienes?

Gracias, Manfenix :D

Curu-Curu:
N sé a cuál efecto te refieres.

el Zambullista:
Ese tipo de scripts no funcionará. No es algo que afecte sólo a imágenes colocadas con URL de tipo s1600; afecta a todas (yo no uso jamás ese tipo de URL y acá se ve el COSO de Blogger.

Tampoco importa se están alojadas en Blogger o en otros servidores y sean enlaces o no lo sean.

Es un script que agrega Blogger y por ahora, no parece haber opciones para quitarlo; es parte del sistema en si mismo aunque no está agregado a todos los blogs. Se lo ve en el código fuente:

_WidgetManager._RegisterWidget('_BlogView', .............'lightboxEnabled': true, 'lightboxModuleUrl': 'http://www.blogger.com/static/v1/jsbin/XXXXXXXXXX-lbx_es.js'}, 'displayModeFull'));

Karla:
Sí, lo vi. Lamento no compartir el entusiasmo. Simplemente, destruye parte de este blog, impide que funcionen cosas.
O Blogger informa lo que ha hecho y da la opción de deshabilitar esa función o habrá que pensar seriamente en irse.

El código que genera ese COSO es de terror y el script está lleno de funciones para etiquetas las imágenes, enviarlas a Google Plus y cosas por el estilo que no parecen estar funcionando. También parece incluir visor para videos.

Yo: LO ODIO.

Responder
Karla  

Jeje, bueno, siento mucho que te esté causando problemas, puede sacarte de onda cuando pasa algo sin que se te avise y sin opción a elegir, pero, creo que la mayoría lo recibirá con agrado. Posiblemente hagan cambios al respecto :).

Parece que todavía no han dicho nada, about that..., en su blog, pero tal vez en eso anden jaja..., por mi parte yo voy a cambiar las imágenes que subí desde Windows Live Writter, ya que con esas parece que hay problemas...

Salu2!

Responder
Yhonny E.  

Hola, gracias por la respuesta, bueno mi problema es el siguiente, cuando voy a diseño me presenta la pestaña PLANTILLA, entonces no puedo añadir widgets en la pagina diseño como antes, entonces no puedo agregar nada ni en la barra ni debajo o encima de los post, solo me dice plantilla y tengo que editar el codigo de ella, pero no me sale como antes, con la pestaña diseño agregar widgets. Y cuando lo arreglo para que salgan otra vez, pues pierde el diseño clasico, pierde las imagenes de la abrra lateral, pierde el efecto clasico de los titulos de entrada, y eso es lo que no quiero perder, con el beneficio que tambien pueda agregarle widgets sin perder el formato original de la plantilla clasica. Gracias por su atencion

Responder
JMiur  

Qué ves cuando entras a tu cuenta no es algo sobre lo cual pueda guiarte. Si los widgets no son editables, puedes fijarte en el código y verificar que no estén bloqueados. Si lo están dirán algo así:

<b:widget id='xxxxxxx' locked='true' title='xxxxxxxx' type='xxxxxxxx'/>

en cuyo caso, basta que elimines el atributo locked='true'
o lo reemplaces por locked='false'

busca toda referencia a locked='true' y cámbiala.

Responder
EL CONDE  

hola Jmiur... q buena explicacion (exelente, como siempre), pero de casualidad sabes como ponerle fotorafias desde picasa y botones de navegabilidad? gracias... seria de mucha ayuda, si no es mucha molestia...

Responder
JMiur  

En las entradas que siguen a esta serie se muestra cómo usarlo para mostrar imágenes que, en lso demos, están en Blogger o sea, en Picasa.

En cuanto a agregar botones, para eso, debes construir un script específico que controle la galería de imágenes, probablemente usando arrays o algún otro método.

Responder
PS3 Argento  

Te digo la verdad? no entendi nada de nada, osea no se que poner de todos los codigos que mostraste, decime que agrego a la plantilla y que pongo en un gadget para mostrar un video de YouTube con un click en una imagen. Saludos!

Responder
JMiur  

Acá no hay nada que copiar y pegar. Si quieres una ventana modal que haga eso, hay cientos de ellas en la web.

Si quieres aprender cómo funciona y cómo crear una, deberás seguir leyendo las siguentes tres entradas y luego, practicar, probar y ver.

Responder
Iván  

Hola JMiur, soy yo de nuevo, siemore que tengo alguna duda me dirijo a tu blog, siempre me ayudaste y espero no causarte problemas, necesito por favor que me digas como puedo hacer una ventana como esta, junto con las imagenes dentro, si puedes verlo te paso el link:

http://shippuden.tv/naruto-shippuden-248-y-249-sub-espanol.html

Debajo del video dice "descargar capitulo", quiero la ventana que se abre cuando le clickeas y luego de esperar unos segundos aparece otra con imagenes para descargar, reportar, etc...

Si me puedes ayudar con esto estaria muy agradecido, es para mi web.

Gracias por todo JMiur, saludos desde acá.

Responder
JMiur  

Usando una ventana modal. En el caso de ese ejemplo, es algo creado con la libreria jQuery y que probablemente, es parte del tema de WordPrss que utiliza el sitio.

Responder
Conocedor de la vida  

Hola

¿Eso de la ventana modal es como usted tiene la sección de contacto de este blog?

JMiur  

Si. Eso es una ventana modal. Hay muchas variantes de ese tipo de ventanas. Depende del uso que se le quiera dar.

Conocedor de la vida  

Pues que bien, siempre había querido algo así para mi blog se ve mas profesional.

Voy a leer todo su blog seguro me llevare bastante conocimiento y lo pondré en practica.

Le agradezco mucho.

Responder
Alejo Arias  

Gracias, buena explicación.
Me causa gracia lo de los botoncitos de las ventanas que no aparecían sino arriba.

Saludos.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR