Modal

Puedes utilizar los modales de Quickly para incorporar ventanas emergentes en tu sitio web, ya sea para mostrar información destacada, alertas importantes para los usuarios o incluso para presentar contenido altamente personalizado de manera interactiva. ademas el contenido de las modales en el .modal-body tiene aplicado un alto maximo de 300px

Modales

Para implementar un modal, es esencial incluir en el código las etiquetas de atributo personalizado data-Qy-toggle="modal", junto con el identificador id="modal". Si planeas incorporar múltiples modales en tu sitio web o aplicación, necesitas agregar tanto el atributo personalizado como el ID con el mismo nombre y una secuencia numérica, por ejemplo, modal-1, modal-2, modal-3, etc., tal como se ilustra en los ejemplos a continuación.

Modal Uno

Ejemplo botones justificados a la derecha.

HTML

                                    
    <!-- MODAL UNO -->
    <!-- Botón para abrir el primer modal -->
    <button class="btn btn-primary" data-Qy-toggle="modal-1">Abrir Modal 1</button> 

    <!-- Contenedor del primer modal -->
    <div id="modal-1" class="modal">
        <div class="modal-content fadeIn">
            <div class="modal-header">
                <h3>Título de la modal Uno</h3>
                <div class="close close-x"><svg class="ico-24 ico-gray" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z"/></svg></div>
            </div>
            <div class="modal-body">
                <p>Este es un modal de ejemplo...</p>
            </div>
            <div class="modal-footer text-ar">
                <button class="btn btn-secondary close">Cerrar</button>
                <button class="btn btn-primary">Aceptar</button>
            </div>                                        
        </div>
    </div>

Modal Dos

Ejemplo botones justificados a la izquierda.

HTML

                                    
    <!-- MODAL DOS -->  
    <!-- Botón para abrir el segundo modal -->
    <button class="btn btn-primary" data-Qy-toggle="modal-2">Abrir Modal 2</button>  

    <!-- Contenedor del segundo modal -->
    <div id="modal-2" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Título de la modal Dos</h3>
                <div class="close close-x"><svg class="ico-24 ico-gray" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z"/></svg></div>
            </div>
            <div class="modal-body">
                <p>Este es un modal de ejemplo...</p>
            </div>
            <div class="modal-footer text-al">
                <button class="btn btn-secondary close">Cerrar</button>
                <button class="btn btn-primary">Aceptar</button>
            </div>                                        
        </div>
    </div>

Modal Tres

Ejemplo contenido justificados al centro.

HTML

                                    
    <!-- MODAL TRES -->  
    <!-- Botón para abrir el tercer modal -->
    <button class="btn btn-primary" data-Qy-toggle="modal-3">Abrir Modal 3</button>     
                                    
    <!-- Contenedor del tercer modal -->
    <div id="modal-3" class="modal">
        <div class="modal-content">
            <div class="modal-header-c">
                <h3 class="text-ac">Título de la modal Tres</h3>
            </div>
            <div class="modal-body text-ac">
                <p>Este es un modal de ejemplo...</p>
            </div>
            <div class="modal-footer text-ac">
                <button class="btn btn-secondary close">Cerrar</button>
                <button class="btn btn-primary">Aceptar</button>
            </div>                                        
        </div>
    </div>