Cómo crear ventanas emergentes personalizada con Javascript

Escrito por kevin lee | Traducido por daniel gómez villegas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear ventanas emergentes personalizada con Javascript
Las ventanas emergentes pueden ser útiles para mostrar datos importantes a los visitantes del sitio. (Creatas Images/Creatas/Getty Images)

Una de las mejores formas de hacer ventanas emergentes únicas y personalizadas es construir un generador de ventanas emergentes. Una función de JavaScript que crea una ventana emergente personalizada puede reducir tiempo de programación. Al cambiar algunas variables que afectan al tamaño y funcionalidad de un ventana emergente, se puede pasar las variables de a función del generador de ventanas emergentes. Esa función procesará las variables y creará un método "abierto" que creará la ventana emergente.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Inicia el editor HTML y abre un documento HTML.

  2. 2

    Localiza la sección "body" del documento, luego pega el siguiente código:

    <input id="Button1" type="button" value="Show Popup" onclick="popUpGenerator()" />

    Esto crea un botón que llama al generador de ventanas emergentes cuando es presionado.

  3. 3

    Mueve la sección "head" del documento, esto añade este código "script" si ninguno existe:

    <script language="javascript" type="text/javascript">

    </script>

  4. 4

    Añade estas declaraciones de variables debajo de la primera etiqueta de script:

    var url = "http://www.whitehouse.gov"; var height = "400"; var width = "600" var top = "200"; var left = "300";

    Establecer el valor de la variable "url" a cualquier URL que gustes. Si no la cambias, la ventana emergente mostrará la página web de la Casa Blanca como en el ejemplo. Las variables height y width definen la altura y la anchura de la ventana emergente. "top" y "left" le dicen al navegador en qué punto colocar la ventana emergente desde la parte superior de la pantalla y el borde izquierdo de la pantalla. En este ejemplo, la ventana emergente aparecerá a 200 píxeles de arriba, y a 300 de la izquierda. Los valores de height y width son también en píxeles.

  5. 5

    Añade estas declaraciones de variables debajo de las que se muestran en el paso anterior:

    var scrollbars = "1"; / scrollbar / var toolbar = "1"; / toolbar / var location = "1"; / location bar / var menubar = "1"; / menu bar / var statusbar = "0"; var resizeable = "1" / allow user to resize window /

    Estas variables te permiten mostrar u ocultar varios componentes del navegador. Si el valor de una variable es "1", el componente aparece. Si su valor es "0", el navegador no muestra ese componente en particular. En este ejemplo, el navegador mostrará la barra de menú porque el valor de la "barra de menú" es "1". El navegador ocultará la barra de estado, porque el valor de la "barra de estado" variable es "0". Ajusta estos valores como quieras personalizar la apariencia de la ventana emergente.

  6. 6

    Pega la siguiente función JavaScript después del código descrito en el apartado anterior:

    function popUpGenerator() { var popUpString = '';

    popUpString += 'height=' + height; popUpString += ',width=' + width; popUpString += ',top=' + top; popUpString += ',left=' + left; popUpString += ',scrollbars=' + scrollbars; popUpString += ',toolbar=' + toolbar; popUpString += ',location=' + location; popUpString += ',menubar=' + menubar; popUpString += ',status=' + statusbar; popUpString += ',resizable=' + resizeable;

    window.open(url, 'newPopup', popUpString);

    }

    Este es el generador de ventanas emergentes. Combina las variables establecidas previamente y utilízalas para personalizar el método "window.open" que abre la ventana emergente.

  7. 7

    Guarda el documento HTML y ábrelo en cualquier navegador. Haz clic en el "Mostrar ventana emergente". La ventana emergente aparecerá.

Consejos y advertencias

  • También puedes utilizar el "sí" y "no" en lugar de "1" y "0" cuando especifiques los valores para las variables emergentes.
  • Los navegadores modernos no pueden ocultar la barra de direcciones, incluso si eliges que aparezcan.
  • Algunos usuarios instalan bloqueadores de ventanas emergentes. Tus ventanas emergentes no se abrirán si el navegador del usuario tiene un bloqueador de ventanas emergentes (pop-ups).

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles