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!

Demo!

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.