Ventana Modal (Modal Dialog) con jQuery paso a paso
05⋅Agosto⋅2009 Tutoriales, JavaScript 51587 hits (100 %) 14 ComentariosSe 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.
Es justo lo que buscaba.
Muy buen aporte a la comunidad.
=)
un aportaso hermano ... un saludo!!!!
muy buen aporte lo he aplica y corre al 100 solo que tengo una duda quisiera crear otra ventana modal hija y pasarle un parametro a esta misma para posterior mente hacer una consulta y mostrar el resultado en la misma ventana modal hija... espero que me ayuden antemano gracias
Que tal. Muy buen aporte y muy interesante. Pero baje el ejemplo y al momento de precionar el boton no pasa nada. se debe de mover el vinculo?
lo que pasa es que quiero mezclar esto con un servlt para eliminar.
espero y me ayudes
saludos
buscaba algo simple y facil de customizar, miles de propuestas pero est es la mejor porque me permitio hacerlo desde scratch todo gracias!
Pues nada mas le faltaria deshabilitar el boton al darle click con:
- $('#button').attr('disabled','-1');
y luego al cerrar volverlo a habilitar:
- $('#button').removeAttr('disabled');
esto para que no permita volver a abrir la ventana.
saludos...
Gracias man lo veni bucando epro queria uno com este que esplique el desarrollo paso a paso gracias y una que e se mejore lo vuelvo a compartir
muy bueno tu aporte graciassss
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
Esta padre solo que alguien sabe como cerrar la window modal haciendo click en el area oscurecida? es decir no solo al dar click en el boton cerrar si no tambien al clickear el div sombreado. e intentado usar la opcion onClick del div pero no me sale quiza lo estoy haciendo mal espero que alguien me pueda ayudar.
De antemano gracias...=)
Muy buen ejemplo, sólo, que no me funciona con IE8, ¿habrá algúna solución para ello?
Saludos y gracias.