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.
Comentarios
por fin uno esplicado paso a paso
pero tengo una duda como hago para mostrar un archivo .php externo estoy usando el método load pero no me funciona
de ante manos gracias
De antemano gracias...=)
Saludos y gracias.
http://jqueryui.com/demos/
Este me ha gustado mucho.
http://jqueryui.com/demos/dialog/modal-form.html
Saludos
Pues no me habia fijado en ese detalle, revisare por alguna solución (que obviamente debe haber por alli en la web).
Saludos
Tengo una ventana modal echa con capas y tiene el mismo fallo que la que aquí muestras. Si tienes alguna solución, sería de agradecer (necesito resolverlo para IE 6 y superior y FireFox, para FF lo tengo, pero IE...) Gracias.
Quisiera poder hacer dicha ventana con AJAX (COMET) que dado un registro en la BD salga una ventanita en una parte cualquiera de la pagina Ej:(parte inferior derecha) pequeña y que diga un texto en dependencia de lo ocurrido en la BD.
Lo que quisiera es algo así como la que sale en este sitio: http://www.movilnet.com.ve/ que sale en la parte inferior derecha.
La misma sale cada x tiempo pero yo lo que quiero es que se pueda llamar a alguna función pasándole los parámetro necesarios cada ves que ocurra un nuevo registro en la BD. Y poderle mostrar a todos los usuarios conectados que ocurrió un nuevo registro y que usuario fue quien lo hizo.
Les agradeseria mucho su ayuda con algun ejemplo que me pueda ayudar en esta funcionavilidad. Me pueden escribir a monierjimenez@hispavista.com, rmonier@rmambi.icrt.cu.
Dejar un comentario