Cómo crear una ventana modal propia (1)

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 +"");

click para ver el demo

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>

mostrar ventana modal

¿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";

mostrar ventana modal again

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

toggle position fixed

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