Popup DHTML Mootools

Hemos recibido algunas consultas recientemente de personas interesadas en crear un popup de estos que ocultan parcialmente el contenido de la web con una especie de sombra semitransparente, para destacar el contenido de la ventana emergente. Con la intención de contestar a estas personas vamos a comentar uno de los scripts que utilizamos en la versión actual de DesarrolloWeb.com, que sirve especialmente para ese cometido.

Hacer por nosotros mismos este sistema realmente no tiene mucha complejidad, si tenemos un poco de idea de CSS y hemos seguido el Manual de Mootools publicado en DesarrolloWeb.com. En este artículo no vamos a explicar cómo se haría este sistema DHTML paso por paso, sino que vamos a publicar directamente un script, creado por nosotros mismos, que genera los popups y los muestra. Lo que aprenderemos a continuación es a usar esos scripts en nuestras propias páginas.

Queremos ir explicando poco a poco diversos componentes útiles para crear interfaces de usuario en páginas web, que hemos creado el propio equipo de DesarrolloWeb.com y tenemos en producción en este sitio web. Lo iremos publicando todo en el Taller de Mootools.

Popup DHTML con efecto de sombra

Este popup DHTML es utilizado en multitud de páginas web actuales. Bueno, no este en concreto, sino algunos con funcionamiento similar. Lo habremos visto, por tanto, multitud de veces. En cualquier caso, para hacerse una idea exacta de lo que vamos a realizar, se puede acceder a la página del ejemplo en funcionamiento.

El desarrollo de este tipo de popups podría hacerse de diversos modos y con más y menos opciones de personalización. La versión que publicamos es bastante sencilla y por supuesto que podría implementarse de una manera más elaborada, pero al menos veremos un popup sencillo de entender y plenamente usable.

Veremos una receta paso por paso para poner en marcha este popup.

1.- Incluir el Framework Javascript Mootools

Esto lo tenemos que saber hacer ya y si no es así, recomendamos leer los primeros capítulos del manual de Mootools.

2.- incluir el script para generar el popup

El script está basado en una clase que hemos llamado MiPopup, construida en Javascript y que hace uso de Mootools. El código de clase no lo vamos a explicar, sino que vamos a enseñar simplemente cómo usarla. No obstante, cualquier persona con un conocimiento medio del framework podría entenderla.

var MiPopup = new Class({
   initialize: function(miHtml,ancho,alto,titulo){
      this.titulo=titulo;
      this.tamanoBody = window.getScrollSize();
      this.posScroll = window.getScroll();
      this.espacioDisponibleVentana = window.getSize();
      this.capaSombra = new Element("div", {'id': 'capasombra', 'style': 'width: ' + this.tamanoBody.x + 'px; height: ' + this.tamanoBody.y + 'px; ' });
      this.capaSombra.inject(document.body);
      var myFx = new Fx.Tween(this.capaSombra,{'duration': 300});
      myFx.start('opacity',0,0.8);
      
      this.contenido = new Element("div", {'id': 'contenidopopup'});
      this.contenido.set('html', "<div class=cuerpotextopopup>" + miHtml + "</div>");
      var titulo = new Element("div", {'id': 'titulopopup'});
      titulo.set('html', this.titulo);
      var cerrar = new Element("div", {'id': 'cerrarpopup'});
      cerrar.addEvent('click', function(){
         this.cerrar();
      }.bind(this));
      cerrar.inject(titulo,'top');
      titulo.inject(this.contenido,'top');
            
      this.capaPopup = new Element("div", {'id': 'capapopup', 'style': 'margin-left:-' + ancho/2 +'px; top:' + (this.posScroll.y + (this.espacioDisponibleVentana.y/2) - (alto/2)-15) +'px'});
      this.capaPopup.inject(this.capaSombra,'after');
      
      var myFx2 = new Fx.Tween(this.capaPopup,{'duration': 700});
      myFx2.start('width',4,ancho);
      myFx2.addEvent('complete', function(){
         var myFx3 = new Fx.Tween(this.capaPopup,{'duration': 700});
         myFx3.start('height',4,alto+30);
         myFx3.addEvent('complete', function(){
            this.contenido.inject(this.capaPopup);
            this.contenido.setStyle('opacity', 0);
            this.contenido.setStyle('display', 'block');
            var myFx4 = new Fx.Tween(this.contenido,{'duration': 600});
            myFx4.start('opacity',0,1);
         }.bind(this));
      }.bind(this));
      
      this.capaSombra.addEvent('click', function(){
            this.cerrar();
         }.bind(this)
      );
   },
   
   cerrar: function(){
      var myFx = new Fx.Tween(this.capaPopup,{'duration': 500});
      myFx.start('opacity',1,0);
      myFx.addEvent('complete', function(){
         var myFx2 = new Fx.Tween(this.capaSombra,{'duration': 500});
         myFx2.start('opacity',0.8,0);
         myFx2.addEvent('complete', function(){
            this.capaSombra.destroy();
            this.capaPopup.destroy();
         }.bind(this));
      }.bind(this));
   }
});

Como se puede ver, la clase tiene un método initialize(), que es el constructor y un método cerrar() que es el que se encargar de cerrar el popup.

El método constructor recibe 4 parámetros, que son el HTML que queremos mostrar en el popup, la anchura y altura que deseamos que tenga y finalmente una cadena con el título para la cabecera del popup. Al llamar al constructor se muestra directamente el popup en la página, es decir, construir el popup hace que éste se muestre directamente en la página. Luego veremos cómo llamar a este constructor desde nuestros scripts como respuesta a una acción del usuario.

El método cerrar() no nos debe importar demasiado, puesto que nosotros no tenemos que invocarlo directamente para cerrar el popup, sino que ya se enlaza desde el botón de cerrar del popup automáticamente.

3.- Crear un poco de CSS para estilizar el popup

El siguiente paso es añadir unas cuantas reglas de estilo a nuestras CSS para definir el aspecto que tendrá el popup DHTML en nuestra página, así como la capa de sombra. A continuación podemos ver unos estilos posibles, pero vosotros los deberíais adaptar al look&feel de vuestra propia web.

/*POPUP*/
#capasombra {
background:#000000 none repeat scroll 0 0;
cursor:pointer;
left:0;
opacity:0;
position:absolute;
text-align:center;
top:0;
}
#capapopup {
background-color:#ccF;
border:3px solid #339;
height:5px;
left:50%;
overflow:hidden;
padding:4px;
position:absolute;
text-align:left;
width:4px;
}
#cerrarpopup {
background:transparent url(images/cerrarpopup.png) no-repeat scroll 0 0;
cursor:pointer;
float:right;
height:28px;
width:35px;
}
#titulopopup {
background: #cf6 none repeat scroll 0 0;
border-bottom: 2px solid #ffc;
font-size:1em;
font-weight:bold;
height:32px;
line-height:27px;
margin-bottom:3px;
overflow:hidden;
padding:2px 3px 0 10px;
text-align:left;
}
#contenidopopup {
display:none;
opacity:0;
}
.cuerpotextopopup{padding:5px;font-size: 0.75em;}

4.- HTML de un elemento que muestra el popup

Se supone que tendremos un elemento de la página que estará asociado al popup, es decir, un elemento que, al clicarse, abra el popup DHTML. Este elemento puede ser de cualquier tipo, un enlace, una capa o lo que se desee.

<a href="#" id="popup1">Este enlace abre un popup!</a>
<br>
<br>
<div id="capa">Haciendo clic en esta capa también se abre un popup!</div>

Si os fijáis, lo único que se tiene que colocar es un identificador a ese elemento, porque ahora tendremos que hacer un script para asociar ese o esos elementos al popup.

5.- Código Mootools para asociar los elementos al lanzamiento del popup

Ahora viene la parte en la que más debemos participar con nuestro código personalizado a las necesidades del sitio. Se trata de "enganchar" los elementos HTML al popup, para hacer que se muestre la ventana emergente al hacer clic. Esto realmente no tiene mucho misterio, pero trataremos de explicarlo un poco.

Tenemos primero que definir un evento "click" sobre el elemento que deseemos (podría ser también cualquier otro tipo de evento, pero el típico que necesitaremos será el clic). Luego podríamos llamar al constructor del popup para generar el popup DHTML. La propia llamada al constructor se encargará de abrir el popup.

Al constructor le enviaremos varios datos, como se comentó antes. El más importante es el código HTML del texto que se quiere mostrar en el cuerpo del popup. Pero también tenemos que indicar una anchura y altura, con dos números enteros que tendremos que marcar en el momento de invocar el popup. Luego también debemos especificar el título con el que encabezar el popup.

Tenemos a continuación dos códigos de ejemplo, para poder asociar los eventos a cada uno de los dos elementos que vimos en el paso anterior.

$("popup1").addEvent("click", function(e){
   e.stop();
   var htmlPopup = "<b>Hola amigos!</b>,<p>Esto es una prueba de un popup DHTML con la típica capa de sombra!</p><p>Podríamos hacerlo fácilmente con Mootools, aunque este script he de aceptar que podría mejorarse.";
   new MiPopup(htmlPopup, 400, 160, "Primer Popup desde un enlace");
});
$("capa").addEvent("click", function(e){
   e.stop();
   var htmlPopup = "Este popup es sencillo de usar, pero con funcionalidad limitada!";
   new MiPopup(htmlPopup, 600, 50, "Primer Popup desde un enlace");
});

Código completo del ejemplo de popup Mootools

Ahora, para completar este artículo, voy a colocar el código completo de la página que hace uso de la clase para implementar el popup DHTML.

<html>
<head>
   <title>Probando popup DHTML Mootools</title>
<style type="text/css">
body{
   font-family: verdana, arial;
}

/*POPUP*/
#capasombra {
background:#000000 none repeat scroll 0 0;
cursor:pointer;
left:0;
opacity:0;
position:absolute;
text-align:center;
top:0;
}
#capapopup {
background-color:#ccF;
border:3px solid #339;
height:5px;
left:50%;
overflow:hidden;
padding:4px;
position:absolute;
text-align:left;
width:4px;
}
#cerrarpopup {
background:transparent url(images/cerrarpopup.png) no-repeat scroll 0 0;
cursor:pointer;
float:right;
height:28px;
width:35px;
}
#titulopopup {
background: #cf6 none repeat scroll 0 0;
border-bottom: 2px solid #ffc;
font-size:1em;
font-weight:bold;
height:32px;
line-height:27px;
margin-bottom:3px;
overflow:hidden;
padding:2px 3px 0 10px;
text-align:left;
}
#contenidopopup {
display:none;
opacity:0;
}
.cuerpotextopopup{padding:5px;font-size: 0.75em;}

</style>
   <script src="../mootools-1.2.4-core-yc.js" type="text/javascript"></script>
<script>
var MiPopup = new Class({
   initialize: function(miHtml,ancho,alto,titulo){
      this.titulo=titulo;
      this.tamanoBody = window.getScrollSize();
      this.posScroll = window.getScroll();
      this.espacioDisponibleVentana = window.getSize();
      this.capaSombra = new Element("div", {'id': 'capasombra', 'style': 'width: ' + this.tamanoBody.x + 'px; height: ' + this.tamanoBody.y + 'px; ' });
      this.capaSombra.inject(document.body);
      var myFx = new Fx.Tween(this.capaSombra,{'duration': 300});
      myFx.start('opacity',0,0.8);
      
      this.contenido = new Element("div", {'id': 'contenidopopup'});
      this.contenido.set('html', "<div class=cuerpotextopopup>" + miHtml + "</div>");
      var titulo = new Element("div", {'id': 'titulopopup'});
      titulo.set('html', this.titulo);
      var cerrar = new Element("div", {'id': 'cerrarpopup'});
      cerrar.addEvent('click', function(){
         this.cerrar();
      }.bind(this));
      cerrar.inject(titulo,'top');
      titulo.inject(this.contenido,'top');
            
      this.capaPopup = new Element("div", {'id': 'capapopup', 'style': 'margin-left:-' + ancho/2 +'px; top:' + (this.posScroll.y + (this.espacioDisponibleVentana.y/2) - (alto/2)-15) +'px'});
      this.capaPopup.inject(this.capaSombra,'after');
      
      var myFx2 = new Fx.Tween(this.capaPopup,{'duration': 700});
      myFx2.start('width',4,ancho);
      myFx2.addEvent('complete', function(){
         var myFx3 = new Fx.Tween(this.capaPopup,{'duration': 700});
         myFx3.start('height',4,alto+30);
         myFx3.addEvent('complete', function(){
            this.contenido.inject(this.capaPopup);
            this.contenido.setStyle('opacity', 0);
            this.contenido.setStyle('display', 'block');
            var myFx4 = new Fx.Tween(this.contenido,{'duration': 600});
            myFx4.start('opacity',0,1);
         }.bind(this));
      }.bind(this));
      
      this.capaSombra.addEvent('click', function(){
            this.cerrar();
         }.bind(this)
      );
   },
   
   cerrar: function(){
      var myFx = new Fx.Tween(this.capaPopup,{'duration': 500});
      myFx.start('opacity',1,0);
      myFx.addEvent('complete', function(){
         var myFx2 = new Fx.Tween(this.capaSombra,{'duration': 500});
         myFx2.start('opacity',0.8,0);
         myFx2.addEvent('complete', function(){
            this.capaSombra.destroy();
            this.capaPopup.destroy();
         }.bind(this));
      }.bind(this));
   }
});

window.addEvent("domready", function(){
   $("popup1").addEvent("click", function(e){
      e.stop();
      var htmlPopup = "<b>Hola amigos!</b>,<p>Esto es una prueba de un popup DHTML con la típica capa de sombra!</p><p>Podríamos hacerlo fácilmente con Mootools, aunque este script he de aceptar que podría mejorarse.";
      new MiPopup(htmlPopup, 400, 160, "Primer Popup desde un enlace");
   });
   $("capa").addEvent("click", function(e){
      e.stop();
      var htmlPopup = "Este popup es sencillo de usar, pero con funcionalidad limitada!";
      new MiPopup(htmlPopup, 600, 50, "Primer Popup desde un enlace");
   });
});
</script>
</head>

<body>

<a href="#" id="popup1">Este enlace abre un popup!</a>

<br>
<br>
<br>
<div id="capa">Haciendo clic en esta capa también se abre un popup!</div>

</body>
</html>

Finalmente, ponemos un enlace para los que quieran ver el script en marcha.