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

Ventana Modal (Modal Dialog) con jQuery paso a paso

24 55438

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