Ventana Modal (Modal Dialog) con jQuery paso a paso
05-08-2009 Tutoriales, JavaScript 75048 hits (100 %) 21 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.
Jesus Liñan
Si en pantalla muestro un listado de productos almacenados en base de datos MySQL y quiero mostrar en la ventana modal la descripción de los mismos y que el evento en el enlace (no un botón como en el ejemplo) despliega la ventana modal sea con efecto de mouseover, ¿cómo lo hago?
Con esa línea llamas a jquery que es biblioteca de JavaScript para interactuar facilmente con los elementos HTML y otras funciones más. Por supuesto tienes que descargarlo ó hacer referencia a una url donde esté alojada.
Saludos :)
A mi no me funciona ni el que descargue, tengo una pregunta que script llama con el de <script type="text/javascript" src="jquery-1.2.3.min.js"></script>
Gracias.
De diversas maneras, se me ocurre en evento onload de la pagina para hagas ello puede usar jQuery, y con la ayuda de cookies para que solo lo haga una vez y no a cada momento por que sino podría causar una molestia a los visitantes de tu web.
saludos
Me parece muy interesante, y lo he querido provar, pero no consigo hacerlo funcionar.
Por favor alguien me podria explicarme como hacerlo?
Veo que los ficheros que hay en la "descarga" no son los mismos que hay en la web y no se como montar esto.
Muchas gracias y cordiales saludos.
Y mi sitio web apenas lo estoy creando, aplicando todo lo que voy consultando y aprendiendo a usar..
Muy buen aporte a la comunidad.
=)