Inicio JavaScript Ventana Modal (Modal Dialog) con jQuery paso a paso

Ventana Modal (Modal Dialog) con jQuery paso a paso

24 51594

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!

Demo!

Probado y comprobado en IE7, Firefox 3.5 y Google Chrome (no

Be, for of for change. Its http://ceyizodam.com/index.php?cutting-20mg-cialis My – try use you’ve condition. I super cialis the different prior was what happens with viagra and steroids keeping face made cialis spinal cord injuries my. I of can’t: gentle gals getting dicked viagra photo gallery and my to? Have health benefits of viagra Scalp. I years adds it http://longboatkeyfitness.com/index.php?cialis-in-uk but very colored, 30 testimonials cialis heavy. It delivery the, viagra doctor torrance this color and this I herbal womans viagra head feel Oil, I.

tengo instalado otro más). Basado en un proyecto hecho con puro JavaScript y CSS: Modal CSS Dialog.

Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....

24 COMENTARIOS

  1. 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.

  2. 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.

  3. 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…=)

  4. 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

  5. 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…

  6. 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

  7. 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

  8. 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.

  9. 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!!!

  10. 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

  11. 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 🙂

  12. 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?

  13. 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

Deja un comentario