Modal

Un Modal es una ventana emergente es un cuadro de diálogo que se superpone al contenido de una página y, normalmente, se debe interactuar con él de alguna manera para volver a la página. Para añadir un Modal se hace desde  +Add > Helpers > Modal.

AÑADIR ELEMENTOS A UN MODAL

Un Modal consiste en un overlay transparente y un div contenedor. Cualquier elemento puede ser insertado en el div contenedor. modal, Para insertar un elemento en un  Modal, selecciona el Modal  y luego elige cualquier elemento del menú +Add. También puede arrastrar y soltar elementos en el Modal como en cualquier otro contenedor.

OPCIONES DE ESTILO Y CONFIGURACIÓN DEL MODAL

Comportamiento del Editor

Esta configuración determina cómo se previsualiza el Modal en el constructor.

• Inline - El Modal se mostrará en línea con el resto del contenido del diseño.
• Live preview - El Modal aparecerá como si estuviera en vivo, superponiéndose al contenido del diseño.
• Hidden - El Modal se ocultará completamente en la vista previa del Constructor.

Trigger

Este ajuste determina la condición que hace que aparezca el Modal.

• After number of clicks - Un número de clics después de los cuales se mostrará el Modal.
• After number of page views - El número de visitas a la página después de las cuales se mostrará el Modal.
• On page scroll -El Modal se muestra después de que el usuario se desplace hacia abajo un porcentaje específico de la página, o cuando el usuario se desplace hacia arriba.
• After specified time -Especifique un número de segundos después del cual se mostrará el Modal.
• After time inactive -Especifica un número de segundos de inactividad del usuario después de los cuales se mostrará el Modal.
• On exit intent -Mostrar el Modal cuando el usuario intenta salir de la página.
• On scroll to element -Especifica un elemento que activará el Modal cuando el elemento entre en la ventana gráfica. Utiliza el botón Choose y luego haz click en el elemento que debe activar el Modal, o escribe el ID del elemento en el campo.
• User clicks element -Especifica un elemento que activará el Modal cuando se haga clic en el elemento. Utiliza el botón Choose y luego click en el elemento que debe activar el Modal, o escribe el ID del elemento en el campo.

También puedes especificar la frecuencia con la que debe mostrarse el Modal a un determinado usuario con el desplegable After Modal is Shown.

• Show again on every page load - El Modal se mostrará cada vez que se recargue la página y se produzca el trigger(Disparador) dado.
• Never show again - Se mostrará una vez a un usuario, y luego no se volverá a mostrar a este mismo usuario.
• Show again after -Especifica un número de días después de los cuales el Modal se mostrará de nuevo a un usuario.

Content Styles

The Content Styles area allows you to set the Modal's child element layout, horizontal item alignment, vertical item alignment, text color, and background color.

Modal Styles

• Width - Establece la anchura total del elemento contenedor del Modal. El valor predeterminado es %, pero se puede establecer en PX o VW haciendo click en el símbolo % y eligiendo una unidad diferente.
• Backdrop Color - Establece el color del fondo. Si no deseas ningún fondo, mueve el deslizador alfa a 0.
• Modal Position - Establece la posición del elemento contenedor de la Modal.

Closing

Este ajuste permite determinar el comportamiento de cierre de un Modal.

• Close Modal Automatically - Si la respuesta es sí (yes), permite especificar un número de segundos después de los cuales el Modal se cerrará automáticamente.
• Close on ESC key - Si la respuesta es sí,(yes), al pulsar la tecla ESC se cerrará el Modal.
• Close Modal On Backdrop Click - Si se pone en si, (yes), al hacer click en el fondo del Modal se cerrará.
• Insert Close Button - Inserta un botón que, al ser pulsado, cerrará el Modal.

Cualquier elemento con la clase .oxy-close-modal actuará como botón de cierre, permitiendo utilizar iconos y otros elementos como botones de cierre para el Modal. Además, puede utilizar JavaScript para cerrar el Modal mediante la función oxyCloseModal(). Esta opción ofrece a los usuarios avanzados más flexibilidad para determinar cuándo y cómo se cierra un Modal. // Always use oxyCloseModal() // after the full DOM is loaded // ie. on the document ready event jQuery( document ).ready( function() { // check if the function is defined // (we may be on a page without modals) if( typeof oxyCloseModal !== 'undefined' ) { // close the first open modal found oxyCloseModal(); // close a specific modal, if found oxyCloseModal( document.getElementById('myModal') ); } } ); Última modificación: 11 de junio de 2020