@alterebro: Alter Ebro Expanding Modal Window

Alter Ebro Expanding Modal Window

miércoles, febrero 02, 2005 @13:39

Este es uno de mis primeros scripts, la vieja ventana pop-up expandible. Funciona abriendo gradualmente una nueva ventana del navegador con un iframe en su interior que carga la URL pasada como parámetro a la función.
En el momento de los tests sobre diferentes navegadores (hace más de un año), funciono de forma esperada en Firebird, Internet Explorer 6, K-Meleon y Netscape Navigator 6.2 sobre Windows PC y con ciertos problemas a la hora de redimensionarse en Safari de Mac.

La función necesita de 4 parámetros que son las dimensiones finales en pixeles de ancho y alto que tendra el tamaño final de la ventana (como número entero), la ruta URL de la página a abrir y la cadena con el título que se desea para esta nueva ventana.

// ALTER EBRO EXPANDING MODAL WINDOW by Jorge Moreno [ www.alterebro.com ]
function aeWdw(ancho,alto,pagina,titulo) {
 var codigo = "<html><head><title>"+titulo+"</title>\n"+
 "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">\n"+
 "<meta http-equiv=\"Author\" content=\"Jorge Moreno [ www.AlterEbro.com ]\">\n"+
 "<scr"+"ipt language=\"JavaScript\" type=\"text/javascript\">\n"+
 "var incrementoX=100;\n"+
 "var incrementoY=100;\n"+
 "var ancho="+ancho+";\n"+
 "var alto="+alto+";\n"+
 "function mueveVentana() {\n"+
 " var centroX = (screen.width-document.body.offsetWidth)/2;\n"+
 " var centroY = (screen.height-document.body.offsetHeight)/2;\n"+
 " incrementoX += (ancho - document.body.offsetWidth)/10;\n"+
 " incrementoY += (alto - document.body.offsetHeight)/10;\n"+ 
 " window.resizeTo(incrementoX,incrementoY);\n"+
 " window.moveTo(centroX,centroY);\n"+
 " muevete = window.setTimeout ('mueveVentana();',20);\n"+
 " if ((document.body.offsetWidth == ancho) && (document.body.offsetHeight == alto)) {\n"+
 "  clearTimeout(muevete);\n"+
 " }\n"+
 " }\n"+
 "</scr"+"ipt>\n"+
 "<style type=\"text/css\">\n"+
 " body { margin: 0px; border: none; }\n"+
 " #aeDIV { width: 100%; height: 100%; }\n"+
 "</style>\n"+
 "</head><body>\n"+
 "<div id=\"aeDIV\"><iframe src=\""+pagina+"\" name=\"aeIFrame\" width=\"100%\" height=\"100%\" frameborder=\"0\"></iframe></div>\n"+
 "<scr"+"ipt language=\"JavaScript\" type=\"text/javascript\">mueveVentana();</scr"+"ipt>\n"+
 "</body></html>";
 
 var izquierda = (screen.width-100)/2;
 var arriba = (screen.height-100)/2;

 alterEbroWindow = window.open('', '', 'width=100, height=100, top='+arriba+', left='+izquierda+', scrollbars=auto');
 alterEbroWindow.document.open();
 alterEbroWindow.document.write(codigo);
 alterEbroWindow.document.close();
}

Como ejemplo de uso, pongamos que queremos abrir una nueva ventana de 600x400 pixels cargando la página de google, lo podriamos hacer de la siguiente forma:

<!-- HTML -->
<a 
 href="http://www.google.com" 
 title="Google Web Search" 
 onclick="aeWdw(600, 400, this.href, this.title); return false;">
  Alter Ebro Expanding Modal Window
</a>

Etiquetas: javascript

@alterebro

Alter Ebro Expanding Modal Window

0 comentarios

Publicar un comentario