martes, 3 de mayo de 2011

Abrir popup con JavaScript

El día de hoy les hablare como poder abrir una nueva venta con JavaScript independiente de la que ya tenemos abierta, es decir un popup.
Esto es muy simple, solo invocamos una función de window llamada open, la cual recibe 3 parámetros importantes de tipo string:
  1. El primero es el nombre de la página que deseamos abrir entre comillas, puede ser una página html, aspx, etc.
  2. Seguido por el nombre de la venta o popup.
  3. Paso seguido las características de la ventana es decir:
  • alto y ancho de la ventana (width, height)
  • resizable: con yes o no dependiendo si permitiremos que la venta se puede hacer mas grande.
  • toolbar: con yes o no si no queremos mostrar la barra de herramientas.
  • menubar: para esconder la barra de menus,
  • status: para determinar si mostraremos la barra de status.
  • scrollbars: esta en caso de que nuestro contenido tenga cierto tamaño y no sea necesaria las barras de desplazamiento.

    Les comparto el código con el cual realizo esta acción.


    <script type="text/javascript">
    function abrir()
    {
     window.open("close.html","ventana","width=900, height=600, resizable=no, toolbar=yes, menubar=yes, status= yes, scrollbars=yes")
    }
    </script>

    Con este código dentro de nuestro <head> como siempre, lo podemos asignar a nuestro botón html, o algún otro control de nuestro agrado.

    <input onclick="abrir()" type="button" value="abrir ventana" />

    Ejemplo funcionando:




    PD. En esta popup encontraran la forma de como cerrar la ventana abierta por medio de JavaScript.

    Si tienen algún problema con el código para cerrar la ventana, con el navegador FIREFOX, les dejo los pasos que seguí para que me aceptara la función, estos pasos aclaro fueron copiados de un foro, solo paso el tip para que puedan comprobar su funcionamiento. Con Internet Explorer no ahí problema alguno.

    Pasos en firefox:
    1. Abrir Mozilla
    2. en la bara de direccion ingresas el siguiente texto
    de la misma forma que esta escrito, sin comillas 'about:config'
    3. luego dan enter.
    4. Aceptamos tener cuidado.
    5. En la ventana carga todas la variables de configuracion y hay buscamos la siguiente: 'dom.allow_scripts_to_close_windows';
    6. cambianos el estado de false a true, asiendo clic sobre esta opcion.
    7. cerramos mozilla.
    8. ya podemos probar el codigo.

    Si tienen alguna duda no duden en comentarlo,
    Saludos cordiales!

    Atte.
    LSCA.Gustavo Ortiz Gámez.

    No hay comentarios:

    Publicar un comentario