Repite mentalmente: No es bueno usar Popups. En los sitios web algunas veces es necesario usar un Popup, existen algunas formas de hacerlo, como esta:
<a href="popup.html" onClick="window.open('popup.html', 'windowname1', 'width=200, height=77'); return false;">Popup</a>
La cual si lo vemos bien no es del todo mala, ya que el navegador entiende que tiene que ir a Popup.html (aunque JavaScript este desactivado), pero usa el evento onClick y tiene embebido el JavaScript en el mismo enlace, algo no muy óptimo si lo queremos usar en varios lugares nuestro popup, además de que no es del todo accesible.
Este detalle se soluciona de una manera rápida y sencilla, dejando el link como lo que es, solo un enlace a una pagina y dejándole a JavaScript la carga de abrir el Popup, además de poder tener varias configuraciones tanto de tamaño, mostrar barras, etc.
Primero necesitamos crear un enlace, para esto se hace uno como cualquier otro, solo con la característica de que lleva una clase de CSS llamada popup:
<a href="http://www.google.com" class="popup" >Link</a>
Esta clase sera buscada por el JavaScript (podemos usar Alt, ID, etc… a mi me gusto class) en todo el documento, cuando la encuentre usara una funcion interna para abrir el Popup con las configuraciones que nosotros le digamos.
El JavaScript:
var popupConfig = new Array;
//Ejemplo de uso:
// popupLinkConfig["nombreClase"] = new Array ( "target", "width=100, height=100, scrollbars=yes, resizable=yes, status=yes, toolbar=yes, location=yes,menubar=yes");
popupConfig["popup"] = new Array("", "width=640,height=480,scrollbar=yes,menubar=yes");
popupConfig["popupbig"] = new Array("", "width=800,height=650,resizable=yes");
window.onload = initPage;
function initPage() {
initPopupLinks();
}
function initPopupLinks() {
if (!document.getElementsByTagName) return true;
var pageLinks = document.getElementsByTagName("a");
for (var i = 0; i < pageLinks.length; i++) {
if (((pageLinks[i].className != null) &&
(pageLinks[i].className != "")) ||
((pageLinks[i].parentNode.className != null) &&
(pageLinks[i].parentNode.className != ""))) {
var linkClass = " " + pageLinks[i].className + " ";
if ((linkClass == " ") && (pageLinks[i].parentNode.className != "")) {
linkClass = " " + pageLinks[i].parentNode.className + " ";
}
for (var theKey in popupConfig) {
if (linkClass.indexOf(" " + theKey + " ") > -1) {
if ((pageLinks[i].target == "") || (pageLinks[i].target == null)) {
pageLinks[i].target = (popupConfig[theKey][0] != "") ? popupConfig[theKey][0] : theKey;
}
pageLinks[i].settings = popupConfig[theKey][1];
pageLinks[i].onclick = popUp;
}
}
}
}
return true;
}
function popUp() {
newWin = window.open(this.href, this.target, this.settings);
newWin.focus();
return false;
}
Este código JavaScript lo tienes que guardar en un archivo js y nombrarlo como se te de la gana, solamente requieres mandarlo llamar desde tu html para que pueda usarse.
Ahora si te fijaste bien al inicio de código vienen unas lineas de configuración, las cuales son totalmente editables y te permiten tener tantas variantes de popups como tu decidas.
popupLinkConfig["nombreClase"] = new Array ( "target", "width=100, height=100, scrollbars=yes, resizable=yes, status=yes, toolbar=yes, location=yes,menubar=yes");
solo es necesario modificar “nombreClase” y “target” (normalmente yo lo uso en blanco) para que puedas tener una nueva configuración de popup, edita el width y el height para modificar el ancho y alto, y las demás opciones son ya para que juegues con ellas.
Espero que este sencillo tip te sirva para mejorar la accesibilidad y la programación de tus sitios web.
