Componente Modal Inicio - Bsale-IO/template-docs GitHub Wiki

Menú

Componente Modal > Inicio 

{% assign modal_size = 'md' %}
{% assign imagen = '25v2.png' %}
{% assign modal_activado = true %}

{% capture config_modal %}
   "delay":10,
   "show":"always"
{% endcapture %}

{% comment %}
    --------------------------------
    PEGA dentro de modalBody el contenido 
    ------------------------------
{% endcomment %}

{% capture modalBody %}
    <picture>
        <source {{ imagen | source_tag_attributes: 'X' }}>
        <source {{ imagen | source_tag_attributes: 'L' }}>
        <source {{ imagen | source_tag_attributes: 'M' }}>
        <img 
            class="img-fluid" 
            {{ imagen | img_tag_attributes: 'M' }}
            title="pop-up"
            alt="pop-up">
    </picture>
{% endcapture %}

{% comment %}
--------------------------------
    I M P O R T A N T E
    Cualquier modificacion en la siguiente parte puede hacer que el modal deje de funcionar
-------------------------------
{% endcomment %}

{% if modal_activado %}
<div id="modal-inicio" class="modal fade show" data-bs="modal" data-info='{ {{config_modal | strip_newlines }} }' tabindex="-1" role="dialog">
    <div class="modal-dialog modal-{{modal_size}}" role="document">
        <div class="modal-content" style="margin-top:28px;">
            <button type="button" style="position:absolute; top:-24px; right:0; color:white; opacity:.8" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div id="cambios" class="modal-body">
               {{modalBody}}
            </div>
        </div>
    </div>
</div>
{% endif %}

Configuración

A. modal_size

{% assign modal_size = 'md' %}
modal_size tamaño
"lg" Grande
"md" Normal, por defecto
"sm" Pequeño

B. modal_activado

Cuando la configuración modal_activado esté en true, mostrará el contenido y si esta en false se desactivará

{% assign modal_activado = true %}

C. imagen

Es una variable en la cual se especifica la imagen que se desee, solo colocando el nombre

{% assign imagen = '22.png' %}

D. modal_config

configuración significado
delay cuánto segundos esperar antes de que se cierre el modal por si sólo
show cuantas veces se muestra el modal (once, day, always)

Ejemplo 1

delay:10,
show: "once"
  • delay: 10 modal dura 10 segundos en pantalla
  • show: "once" modal se carga sólo la primera vez que el usuario visita la página.

Ejemplo 2

show: "day"
  • delay no existe configuración delay, el modal permanece en pantalla hasta que el cliente lo cierre
  • show: "day" modal se carga sólo una vez al día.

Ejemplo 3

delay:5,
show: "always"
  • delay: 5 modal dura 5 segundos en pantalla
  • show: "always" modal se carga cada vez que el cliente recarga o visite la página

Implementación

  1. Insertar el componente dentro del componente inicio
{{ "Modal > Inicio" | get_component }}
⚠️ **GitHub.com Fallback** ⚠️