1. Inicio
  2. Documentos
  3. Popup al entrar, salir, a...
  4. Apariencia del popup

Apariencia del popup

  • Posición

Define la posición en la que quieres mostrar el popup: superior, centro e inferior e izquierda, centro y derecha.

  • Contenido

Utiliza el editor WYSIWYG para definir el contenido del popup. Puedes insertar cualquier tipo de contenido.

Puedes añadir código HTML clicando en este botón:
  • Color de fondo

Color de fondo del popup.

  • Imagen de fondo

Define una imagen como fondo del popup.

  • Imagen en el contenido

Inserta una imagen dentro del contenido del popup.

  • Enlace de la imagen

Define la URL a la que enlazar cuando se pulsa en la imagen.

  • Opacidad de la capa trasera (overlay)

Define la transparencia de la capa de fondo del popup.

Opacidad 0:
Opacidad 0.5:
Opacidad 1:
  • Altura del popup (en px o %)

Puedes definir una altura del popup. Si no defines ningún valor el tamaño se calcula automáticamente según el contenido del popup.

El valor por defecto es en píxeles (px). Si quieres definir un valor por porcentaje, añade el símbolo %: 50%
  • Anchura del popup (en px o %)

Puedes definir una anchura del popup. Si no defines ningún valor el tamaño se calcula automáticamente según el contenido del popup.

El valor por defecto es en píxeles (px). Si quieres definir un valor por porcentaje, añade el símbolo %: 50%
  • Padding del popup
  • Muestra scroll en la página

Permite hacer scroll del contenido de detrás del popup mientras el popup está abierto. El popup siempre aparecerá fijo en la posición que hayas definido.

Opción habilitada:
  • Cerrar popup cuando se hace clic en el fondo (overlay)

Cierra el popup al hacer clic en la capa del fondo.

  • Difuminar fondo

Desenfoca el fondo que queda detrás del popup.

Opción deshabilitada:
Opción habilitada:
  • Efecto al abrir

Muestra el popup mediante una animación.

  • Efecto al cerrar

Cierra el popup mediante una animación.

  • Añadir una clase CSS a la capa

Añade una clase CSS a la capa que envuelve el popup. De esta forma puedes aplicarle unos estilos a este popup a través de un CSS externo.

  • Reglas CSS

Añade unas reglas CSS que sólo se insertarán en la página cuando se muestre el popup.