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!
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.
Hola a todos, me parece muy bueno este ejemplo de aquí, pero en mi web quiero hacer algo parecido pero que sea de la siguiente forma:
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.
Estando en la ventana modal, si se pulsa varias veces el tabulador se puede llegar a lo que está por debajo de la modal (en este caso al botón de mostrar modal del ejemplo y pulsarlo con la modal por encima), con lo que deja de ser modal.
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.
@GGG:
Pues no me habia fijado en ese detalle, revisare por alguna solución (que obviamente debe haber por alli en la web).
Saludos
Muy bueno, para los que quieran ver y no dan con los ejemplos originales. Estos se encuentran acá
http://jqueryui.com/demos/
Este me ha gustado mucho.
http://jqueryui.com/demos/dialog/modal-form.html
Saludos
Muy buen ejemplo, sólo, que no me funciona con IE8, ¿habrá algúna solución para ello?
Saludos y 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 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
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
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…
buscaba algo simple y facil de customizar, miles de propuestas pero est es la mejor porque me permitio hacerlo desde scratch todo 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
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
un aportaso hermano … un saludo!!!!
Es justo lo que buscaba.
Muy buen aporte a la comunidad.
=)
Hola,
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.
Estimado, muchas gracias, gran aporte, pero una ultima consulta, como podria modificar el codigo para que esta ventana flotante se muestre apenas abra mi pagina de inicio, y no tenga que presionar el boton “mostrar ventana”…. Saludos cordiales!!!
Hola David:
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
Buenas tardes.
A mi no me funciona ni el que descargue, tengo una pregunta que script llama con el de
Gracias.
Hola @carol!
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 🙂
Estimados,
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?
Me parece excelente!
No me funciona en Internet Explorer 11, hay que agregar alguna otra referencia??
Tengo la siguiente duda… espero que me puedan ayudar…
En una página tengo pre-cargada 50 ventanas modales ej:
<div id="modal-1"></div>
<div id="modal-2"></div>
<div id="modal-3"></div>
En el cual las voy llamando según se requiera. Bien…
¿Hay alguna posibilidad de cargar en un solo div ej: <div id="modal-0"></div>
y ahí cargar y llamar el contenido que se requiera sin necesidad de crear tanto código html?
Espero haberme explicado bien y si me responden estupendo, así pueden ayudar a otros, ya que esto es optimización del código ejecutado por primera ves y hace que la página se cargue mucho más rápido.
Saludos