Se me ocurrio crear una ventana modal básica haciendo uso de JavaScript y jQuery. Este pequeño proyecto permite configurar las dimensiones de la ventana modal así como el contenido en formato HTML (quizás lo vaya perfeccionado ó quizas ustedes). Vuelvo a repetir que es muy básico pero explicare el proceso detrás y su código. Demo!
También puedes ver un formulario de suscripción con HTML y jQuery, siguiendo el mismo esquema.
Empecemos con definir los procesos de la ventana.
- Cuando se quiera mostrar la ventana, el fondo se volverá semi-opaco y resaltará la ventana modal (lo clásico) y su contenido.
- Mantener la ventana modal en el centro de la pantalla.
- Permitir cerrar la ventana.
- Permitir configurar su contenido y dimensión.
modal.css
Especificamos los caracteristicas de diseño. Vamos a usar dos clases 1) .bgtransparent, es para el fondo semi-opaco y 2) .bgmodal, es para la ventana en si.
.bgtransparent{ position:fixed; left:0; top:0; background-color:#000; opacity:0.6; filter:alpha(opacity=60); } .bgmodal{ position:fixed; font-family:arial; font-size:1em; border:0.05em solid black; overflow:auto; background-color:#fff; }
Ahora la parte de JavaScript que explicaremos en cada línea de código:
modal.js
$(document).ready(function(){ //parametros principales var contenidoHTML = '<p>Tu contenido HTML aqui</p><button onclick=\"closeModal()\">Cerrar</button>'; var ancho = 600; var alto = 250; $('#button').click(function(){ // fondo transparente // creamos un div nuevo, con dos atributos var bgdiv = $('<div>').attr({ className: 'bgtransparent', id: 'bgtransparent' }); // agregamos nuevo div a la pagina $('body').append(bgdiv); // obtenemos ancho y alto de la ventana del explorer var wscr = $(window).width(); var hscr = $(window).height(); //establecemos las dimensiones del fondo $('#bgtransparent').css("width", wscr); $('#bgtransparent').css("height", hscr); // ventana modal // creamos otro div para la ventana modal y dos atributos var moddiv = $('<div>').attr({ className: 'bgmodal', id: 'bgmodal' }); // agregamos div a la pagina $('body').append(moddiv); // agregamos contenido HTML a la ventana modal $('#bgmodal').append(contenidoHTML); // redimensionamos para que se ajuste al centro y mas $(window).resize(); }); $(window).resize(function(){ // dimensiones de la ventana del explorer var wscr = $(window).width(); var hscr = $(window).height(); // estableciendo dimensiones de fondo $('#bgtransparent').css("width", wscr); $('#bgtransparent').css("height", hscr); // estableciendo tamaño de la ventana modal $('#bgmodal').css("width", ancho+'px'); $('#bgmodal').css("height", alto+'px'); // obtiendo tamaño de la ventana modal var wcnt = $('#bgmodal').width(); var hcnt = $('#bgmodal').height(); // obtener posicion central var mleft = ( wscr - wcnt ) / 2; var mtop = ( hscr - hcnt ) / 2; // estableciendo ventana modal en el centro $('#bgmodal').css("left", mleft+'px'); $('#bgmodal').css("top", mtop+'px'); }); }); function closeModal(){ // removemos divs creados $('#bgmodal').remove(); $('#bgtransparent').remove(); }
Ahora para aplicarlo bastará con lo siguiente:
<html> <head> <link type="text/css" rel="stylesheet" href="modal.css" /> <script type="text/javascript" src="jquery-1.2.3.min.js"></script> <script type="text/javascript" src="modal.js"></script> <title>Modal JavaScript</title> </head> <body> <input type="button" id="button" value="Mostrar Ventana" /> </body> </html>
Este es mi pequeño aporte a los inumerables modal dialog que hay en la web, es algo básico pero sirve como base para mejoras futuras las cuales puedo hacer yo u otra persona que le parezca interesante. Descargar!
Probado y comprobado en IE7, Firefox 3.5 y Google Chrome (no tengo instalado otro más). Basado en un proyecto hecho con puro JavaScript y CSS: Modal CSS Dialog.