Cómo hacer una simple ventana modal con HTML y Javascript
Según se afirma en la Wikipedia, la aparición de Lightbox animó a otros desarrolladores a crear proyectos similares, como el popular Thickbox, basado en jQuery. Lightbox y sus descendientes son aplicaciones escritas en Javascript que hacen un uso intensivo del DOM para mostrar contenido web de forma modal y visualmente atractiva. Andrés Nieto ha recopilado en su página más de veinte de esos proyectos.
Si bien es cierto que no hay que estar inventando la rueda todos los días, porque ya alguien lo hizo por nosotros, hay circunstancias en las que necesitamos una rueda hecha a medida. Por eso, saber cómo se han hecho otras ruedas puede sernos útil para hacer la nuestra.
A continuación explicaré los elementos básicos que necesitamos para hacer una rueda, perdón, una simple ventana modal con HTML y Javascript… 🙂
Primero necesitamos un contenedor, un espacio donde ubicar el contenido web que deseamos mostrar. Normalmente ésto se hace con la etiqueta DIV. Este contenedor formará parte de la página web, pero no se mostrará cuando se visualice la página: será un elemento invisible. Luego necesitamos alguna manera de mostrar el contenedor, y su contenido, cuando nos haga falta. Y por último, necesitaremos también alguna forma de ocultar el contenedor. ¡Manos a la obra!
Pega al final de la sección body de tu página web el siguiente código:
<div id=»miVentana» style=»position: fixed; width: 350px; height: 190px; top: 0; left: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; border: #333333 3px solid; background-color: #FAFAFA; color: #000000; display:none;»>
Aquí pones tu contenido web
</div>
Los atributos más importantes de este DIV son:
id: el identificador del elemento, que nos permitirá recuperarlo y acceder a él a través del DOM.
display: le indicamos al navegador que no muestre este elemento (none).
Dentro del DIV deberás colocar el contenido web que deseas mostrar. ¡Procura que quepa dentro del contenedor!
Luego crea un elemento de script en tu código HTML e inserta las siguientes líneas:
function mostrarVentana()
{
var ventana = document.getElementById(‘miVentana’);
ventana.style.marginTop = «100px»;
ventana.style.left = ((document.body.clientWidth-350) / 2) + «px»;
ventana.style.display = ‘block’;
}
Esta función Javascript obtiene una referencia al contenedor a través de su id, lo coloca en el centro del documento mostrado en el navegador, y lo hace visible.
Por último, agrega éstas líneas de código:
function ocultarVentana()
{
var ventana = document.getElementById(‘miVentana’);
ventana.style.display = ‘none’;
}
Esta función obtiene una referencia al contenedor a través de su id, y lo hace invisible.
Y ya ‘tá. 🙂 Con ésto tenemos todos los elementos básicos para hacer una simple ventana modal con HTML y Javascript. A partir de aquí puedes mejorar el proyecto con todo lo que se te ocurra, o simplemente con las funcionalidades que requiera tu proyecto web.
Enlaces de interés:
El proyecto descrito en acción
Código completo del ejemplo
Muchas Gracias!
Esta ventana modal es responsive desing?
Muchas gracias, me fué muy útil y funcionó
Amigo, estoy usando una ventana modal para ingresar información de un usuario.
un formulario.
Lo que necesito es saber cómo puedo recuperar esa información, la idea es enviarla a un servlet, a traves del metodo POST, que agrego a la etiqueta form.
Luego al hacer clic al botón submit, que se envíe!!!
De antemano gracias!!!
me gustaría tener el código de una ventana model con fondo gris que permita mostrar una noticia al iniciar la web, sin necesidad de oprimir algún botón. saludos
como podria hacer para q al aparecer la ventana modal se bloquee la pagina de fondo?
se puede abrir mandandole un valor?
Informacion de ventanas modales
Funciona de maravilla, gracias!
Hola, la ventana siempre queda arriba, si mi pagina tiene mucho contenido y el botón mostrar ventana esta abajo la ventana se muestra arriba y debo ir al principio de la pagina para verla ¿como hago que la ventana aparezca en la posición que la llamo desde mi pagina?
Gracias y excelente tú información.
Hola quisiera saber como hago para que al iniciar la pagina se vea la ventana modal? desde ya gracias
como estas?
tu simple rueda carece de una instrucción que quite su contenido…para poder reutilizarla con alguna otra cosa.
Cordial Saludo.
gracias por el ejemplo.
Seria Tan Amable de colaborarme con algo.
1. tengo en mi ventana principal un listado de datos con radio Boton, los consulto de una base,hasta hay todo bien.
2.quiero seleccionar otros datos de otra tabla para insertarlos realizando la consulta desde el dato seleccionado originalmente, pero no se como.
3. quiero que se abra una ventana modal con un formulario de registro y enviar mis datos a otra pagina trabajando en la misma ventana Modal y haciendo operaciones dentro de esa misma ventana y cerrarla cuando ya no se necesite.
Mi corre es
jalbanoriega@gmail.com
le agradezco inmensamente si me colabora.
hola, queria saber como hacer para que aparezcan 2 al mismo tiempo en diferentes posiciones, solo logro qe aparezca 1 sola
Muy bueno, muchas gracias, quería mostrar una ventana con un PHP adentro que tiene un formulario para grabar un registro. Se complica?
Saludos.
Me ha funcionado perfectamente en Firefox 17.0.1, Chrome 24.0.1312.57 m e IE 9, pero sigo sin ver que la ventana sea modal ¿…?!!!!
Solo veo que aparece lo que se conoce como un «tooltip», pro no una ventana modal.
¿Falta agregar algo? …se me ha pasado por alto algo?
Saludos
Buenas compañero, excelente aporte, pero tengo una duda.
Quiero mostra informacion desde una base de datos, pero tengo problemas con la id, ya que es una Tabla dinaminca y al seleccionar un elemento de la tabla me debe mostrar la informacion correspondiente a ese elemento, como haria en eso caso a ver si podrias ayudarme en este caso
Saludos
carlos, lo que tendrias que hacer para mostrar 2 ventanas modales seria lo siguiente:
a ambas funciones le indicas que tendran 1 parametro de entrada que sera el nombre del div:
function mostrarVentana(div_nombre)
{
var ventana = document.getElementById(div_nombre); // Accedemos al contenedor
ventana.style.marginTop = «100px»; // Definimos su posición vertical. La ponemos fija para simplificar el código
ventana.style.marginLeft = ((document.body.clientWidth-350) / 2) + «px»; // Definimos su posición horizontal
ventana.style.display = ‘block’; // Y lo hacemos visible
}
function ocultarVentana(div_nombre)
{
var ventana = document.getElementById(div_nombre); // Accedemos al contenedor
ventana.style.display = ‘none’; // Y lo hacemos invisible
}
luego desde tu enlace le indicas el nombre del div:
Haz click aquí
Haz click aquí2
y listo.
NOTA: ahora si debes tener cuidado de que tus ventanas modales no tengan la misma posicion, ya que se pondra 1 de otra.
Título de la ventana
Hola Mundo!
Título de la ventana
Hola Mundo!2
he intentado poner 2 ventanas modales y al darle clik a los 2 enlaces me muestra una sola ventana modal, como inserto dos o mas ventanas modales en un index, osea si quisiera tener un enlace de «hoy» y otro de «mañana» y cada uno abra su ventana como lo hago?
muy util. gracias.
lo probare!!
gracias