Dos scripts para generar pop-ups

Prototype Window Class (PWC) es una librería que permite generar ventanas de alerta de muchas formas diferentes. Requiere de Prototype y es bastante pesada (64KB) pero es una opción si se hace un uso intesivo de estas cosas ya que no sólo admite generar ventanas standard sino también abrir direcciones URL, crear cajas de dialogo o login e incluso usar Ajax.

Mostrar ejemplos es bastante complicado de hacer ya que aquí están funcioanando otros scripts pero, su uso es relativamente sencillo y la página del autor tiene abundante documentación al respecto. Si descargamos el ZIP que ofrecen, allí nos encontraremos con muchas más cosas, incluyendo ejemplos diversos, distintos temas que pueden usarse para personalizar el CSS y una explicación detallada de cada función.

Básicamente, necesitamos Prototype, el script window.js y uno de los archivos CSS (default.css es el más simple y con el que conviene empezar). Todo eso, lo agregamos antes de </head>:

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;prototype&quot;, &quot;1.6.1.0&quot;);
</script>
<script type='text/javascript' src='URL_window.js'>&jt;/script>
<link href='URL_default.css' rel='stylesheet" type='text/css' />

El CSS, como siempre, podemos enlazarlo o agregarlo directamente:

<style type='text/css' >
... y aquí colocamos el contenido del archivo ...
</style>

Para crear esas ventanas también utilizamos JavaScript; algo así, crearía una ventana sencilla:

<script>
win = new Window({className: "dialog", title: "UN EJEMPLO", width:200, height:150, destroyOnClose: true, resizable: true, recenterAuto:false});
win.getContent().update("<h1>MI EJEMPLO</h1>"); 
win.showCenter(); 
&jt;/script>

Una serie de scripts extras nos permiten ampliar las posibilidades:

• window_effects.js agrega efectos especiales a las ventanas
• window_ext.js permite manejar cookies
• tooltip.js permite agregarle funciones para crear tooltips (obviamente)
• debug.js y extended_debug.js son extensiones interesantes para desarrolladores

Algo similar pero bastante más simple es el script llamado DHTML Popup Window ya que es mucho más liviano (8KB) y no requiere ninguna librería extra. Descargamos el demo desde la página del autor y allí nos encontraremos con el script llamado popup-window.js y el CSS básico llamado sample.css.

También los agregamos antes de </head>:

<script type='text/javascript' src='URL_popup-window.js'></script>
<style type='text/css' >
... y aquí colocamos el contenido del archivo CSS ...
</style>

Lo usamos en un enlace, agregando la llamada al evento onclick:

<a href="javascript:void(0);" onclick="popup_show('idDIV', 'idDRAG', 'idEXIT', 'posicion', X, Y, 'idREL');"> CLICK </a>

donde:

idDIV es el nombre del elemento oculto donde agregaremos el contenido a mostrar
idDRAG es el nombre del elemento que usaremos para arrastrar la ventana
idEXIT es el nombre del elemento que usaremos para cerrar la ventana
posicion es uno de estos valores: element, element-right, element-bottom, mouse, screen-top-left, screen-center, screen-bottom-right
X, Y son la distancia relativa si se posicionan respecto de otro elemento

Un ejemplo:

<!-- el enlace -->
<a href="javascript:void(0);" onclick="popup_show('popupDEMO', 'popupdragDEMO', 'popupexitDEMO', 'screen-center', 0, 0);"> abrir pop-up </a>

<!-- el contenido oculto -->
<div id="popupDEMO" class="sample_popup" style="display: none;">
  <div id="popupdragDEMO" class="menu_form_header">
    <img id="popupexitDEMO" class="menu_form_exit" src="URL_unaimagen" />
  </div>
  <div class="menu_form_body">
    ... el contenido a mostrar ...
  </div>
</div>