Quería compartir con ustedes este código que estaba realizando para crear un popup con javascript, con efecto adicional de fadeIn y fadeOut.
Empecemos.
1 - Lo primero que vamos ha hacer es crear un documento html donde se insertara el popup y el botón para encenderlo, ademas de eso contendrá la llamada a la función del popup y los archivos enlazados en la etiqueta head.
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" type="text/css" href="popup.css" media="screen"/>
<script type="text/javascript" src="popup.js"></script>
<script>
window.onload = function () {
document.getElementById("show").onclick = function () {
this.simplePopup({
id: 'popup',
accept: 'accept',
fade: true,
fadeSpeed: 'fast'}
);
}
}
</script>
</head>
<body>
<button id="show">Mostrar</button>
<div id="popup">
<span id="close">Cerrar</span>
<p>Este es el contenido del popup</p>
<button id="accept">Aceptar</button>
</div>
</html>
2 - Creamos una hoja de estilos para ocultar el popup y aplicar un estilo general de ejemplo.
#popup {
background: #FCFCFC;
border: thin solid #EEE;
width: 150px;
height: auto;
padding: 10px;
font: 12px Arial, sans-serif;
display: none;
}
#close{
cursor: pointer;
}
3 - Ahora creamos el archivo js del popup
//Support Element prototype IE
if (!window.Element) {
Element = function () {}
var __createElement = document.createElement;
document.createElement = function (tagName) {
var element = __createElement(tagName);
for (var key in Element.prototype)
element[key] = Element.prototype[key];
return element;
}
var __getElementById = document.getElementById
document.getElementById = function (id) {
var element = __getElementById(id);
for (var key in Element.prototype)
element[key] = Element.prototype[key];
return element;
}
}
//simplePopup(id, accept, close, fade, fadeSpeed)
Element.prototype.simplePopup = function (param) {
if (param.id) {
id = document.getElementById(param.id);
id.style.display = 'block';
id.style.position = 'absolute';
function getDimensions(e) {
if (!e) {
e = window.event
}
width = id.offsetWidth;
height = id.offsetHeight;
}
getDimensions();
id.style.top = '50%';
id.style.left = '50%';
id.style.marginLeft = '-' + parseInt(width / 2) + 'px';
id.style.marginTop = '-' + parseInt(height / 2) + 'px';
}
if (param.accept) {
var accept = document.getElementById(param.accept);
accept.onclick = function () {
if (param.fade == true) {
var t = 100;
id.style.filter = 'alpha(opacity=100)';
id.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
id.style.opacity = 1;
id.style.MozOpacity = 1;
id.style.KHTMLOpacity = 1;
function fadeOut() {
t -= 1;
id.style.filter = 'alpha(opacity=' + t + ')';
id.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + t + ')';
id.style.opacity = t / 100;
id.style.MozOpacity = t / 100;
id.style.KHTMLOpacity = t / 100;
if (t == 0) {
clearInterval(time);
id.style.display = 'none';
}
}
if (param.fadeSpeed == 'slow') param.fadeSpeed = 35;
if (param.fadeSpeed == 'fast') param.fadeSpeed = 1;
if (param.fadeSpeed == 'normal') param.fadeSpeed = 15;
time = window.setInterval(fadeOut, param.fadeSpeed ? param.fadeSpeed : 15);
}
};
}
if (param.close) {
var close = document.getElementById(param.close);
close.onclick = function () {
if (param.fade == true) {
var t = 100;
id.style.filter = 'alpha(opacity=100)';
id.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
id.style.opacity = 1;
id.style.MozOpacity = 1;
id.style.KHTMLOpacity = 1;
function fadeOut() {
t -= 1;
id.style.filter = 'alpha(opacity=' + t + ')';
id.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + t + ')';
id.style.opacity = t / 100;
id.style.MozOpacity = t / 100;
id.style.KHTMLOpacity = t / 100;
if (t == 0) {
clearInterval(time);
id.style.display = 'none';
}
}
if (param.fadeSpeed == 'slow') param.fadeSpeed = 35;
if (param.fadeSpeed == 'fast') param.fadeSpeed = 1;
if (param.fadeSpeed == 'normal') param.fadeSpeed = 15;
time = window.setInterval(fadeOut, param.fadeSpeed ? param.fadeSpeed : 15);
}
};
}
if (param.fade == true) {
var t = 0;
id.style.filter = 'alpha(opacity=0)';
id.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
id.style.opacity = 0 / 100;
id.style.MozOpacity = 0 / 100;
id.style.KHTMLOpacity = 0 / 100;
function fadeIn() {
t += 1;
id.style.filter = 'alpha(opacity=' + t + ')';
id.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + t + ')';
id.style.opacity = t / 100;
id.style.MozOpacity = t / 100;
id.style.KHTMLOpacity = t / 100;
if (t == 100) {
clearInterval(time);
}
}
if (param.fadeSpeed == 'slow') param.fadeSpeed = 35;
if (param.fadeSpeed == 'fast') param.fadeSpeed = 1;
if (param.fadeSpeed == 'normal') param.fadeSpeed = 15;
time = window.setInterval(fadeIn, param.fadeSpeed ? param.fadeSpeed : 15);
}
}
4- Explicación
Debido a que necesitamos aplicar un método al elemento necesitamos Element pero no es compatible con IE 7 y anteriores así que con este código aplicamos soporte para Element.
//Support Element prototype IE
if (!window.Element) {
Element = function () {}
var __createElement = document.createElement;
document.createElement = function (tagName) {
var element = __createElement(tagName);
for (var key in Element.prototype)
element[key] = Element.prototype[key];
return element;
}
var __getElementById = document.getElementById
document.getElementById = function (id) {
var element = __getElementById(id);
for (var key in Element.prototype)
element[key] = Element.prototype[key];
return element;
}
}
/*Luego de crear ese código debemos aplicarle el método al elemento
Aplicamos un método al elemento y lo llamamos simplePopup
Creamos una función la cual le pasaremos parametros opcionales. */
Element.prototype.simplePopup = function (param) {
/*Comprobamos que exista el parámetro id. Si existe
seleccionamos el id del popup, le aplicamos display block y posición absoluta*/
if (param.id) {
id = document.getElementById(param.id);
id.style.display = 'block';
id.style.position = 'absolute';
/*
Ahora vamos a centrar verticalmente el popup no importa el tamaño en que este siempre se centrara verticalmente. Creamos una función y pasando el parámetro evento obtenemos la anchura y la altura del popup
*/
function getDimensions(e) {
if (!e) {
e = window.event
}
width = id.offsetWidth;
height = id.offsetHeight;
}
/*Llamamos la función para obtener las variables de anchura y altura
y aplicamos el valor de la altura y de la anchura dividido en dos negativo
*/
getDimensions();
id.style.top = '50%';
id.style.left = '50%';
id.style.marginLeft = '-' + parseInt(width / 2) + 'px';
id.style.marginTop = '-' + parseInt(height / 2) + 'px';
}
/*Si el existe el boton aceptar aplicamos la función fadeout siempre y cuando el parámetro fade este en true*/
if (param.accept) {
var accept = document.getElementById(param.accept);
/*Cuando hagamos clic en el boton aceptar se ejecutara la función si esta en fade en true solo desaparecerá el popup*/
accept.onclick = function () {
if (param.fade == true) {
var t = 100;
id.style.filter = 'alpha(opacity=100)';
id.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
id.style.opacity = 1;
id.style.MozOpacity = 1;
id.style.KHTMLOpacity = 1;
function fadeOut() {
t -= 1;
id.style.filter = 'alpha(opacity=' + t + ')';
id.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + t + ')';
id.style.opacity = t / 100;
id.style.MozOpacity = t / 100;
id.style.KHTMLOpacity = t / 100;
if (t == 0) {
clearInterval(time);
id.style.display = 'none';
}
}
if (param.fadeSpeed == 'slow') param.fadeSpeed = 35;
if (param.fadeSpeed == 'fast') param.fadeSpeed = 1;
if (param.fadeSpeed == 'normal') param.fadeSpeed = 15;
time = window.setInterval(fadeOut, param.fadeSpeed ? param.fadeSpeed : 15);
}
};
}
/*Aplicamos el mismo fadeout para el parametro close si esta activado */
if (param.close) {
var close = document.getElementById(param.close);
close.onclick = function () {
if (param.fade == true) {
var t = 100;
id.style.filter = 'alpha(opacity=100)';
id.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
id.style.opacity = 1;
id.style.MozOpacity = 1;
id.style.KHTMLOpacity = 1;
function fadeOut() {
t -= 1;
id.style.filter = 'alpha(opacity=' + t + ')';
id.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + t + ')';
id.style.opacity = t / 100;
id.style.MozOpacity = t / 100;
id.style.KHTMLOpacity = t / 100;
if (t == 0) {
clearInterval(time);
id.style.display = 'none';
}
}
if (param.fadeSpeed == 'slow') param.fadeSpeed = 35;
if (param.fadeSpeed == 'fast') param.fadeSpeed = 1;
if (param.fadeSpeed == 'normal') param.fadeSpeed = 15;
time = window.setInterval(fadeOut, param.fadeSpeed ? param.fadeSpeed : 15);
}
};
}
/*Si fade esta en true al mostrar el popup aplicaremos fadeIn*/
if (param.fade == true) {
var t = 0;
id.style.filter = 'alpha(opacity=0)';
id.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
id.style.opacity = 0 / 100;
id.style.MozOpacity = 0 / 100;
id.style.KHTMLOpacity = 0 / 100;
function fadeIn() {
t += 1;
id.style.filter = 'alpha(opacity=' + t + ')';
id.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + t + ')';
id.style.opacity = t / 100;
id.style.MozOpacity = t / 100;
id.style.KHTMLOpacity = t / 100;
if (t == 100) {
clearInterval(time);
}
}
if (param.fadeSpeed == 'slow') param.fadeSpeed = 35;
if (param.fadeSpeed == 'fast') param.fadeSpeed = 1;
if (param.fadeSpeed == 'normal') param.fadeSpeed = 15;
time = window.setInterval(fadeIn, param.fadeSpeed ? param.fadeSpeed : 15);
}
}
Para llamar el método dentro de las etiquetas head
<script>
window.onload = function () {
//Boton mostrar
document.getElementById("show").onclick = function () {
this.simplePopup({
id: 'popup',
accept: 'accept',
fade: true,
fadeSpeed: 'fast'}
);
}
}
</script>
Las propiedades del método son
simplePopup({id(popup), accept:(element), close:(element), fade:(true||false), fadeSpeed:(int, 'slow', 'fast', 'normal')})
