Ventana Modal (Modal Dialog) con jQuery paso a paso
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!
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.
