Modal

El Modal es una herramienta muy utilizada en todo tipo de web, ya que captura y centraliza la la atención del usuario para gestionar acciones y anular de manera momentanea todos los demás elementos. Se basa en una ventana emergente que contiene por lo genera formularios, tabs y accesos a determinadas funciones encapsuladas.

Modal Inicialización

Para pode inicializar el módulo que gestiona este elemento tenemos que disponer de la lógica de la biblioteca agregada al proyecto, esto se puede hacer de diversas maneras, si aún no saben como realizar esto les recomiendo ver Get Started donde se mostrarán como instalar la biblioteca en el proyecto en desarrollo. Luego hay que inicializar el módulo a través de la función que se muestra a continuación. 

    // CDN : https://raw.githack.com/FedeManzano/bodystyle/refs/heads/master/dist/js/bodystyle.min.js

    // 1 OPCIÓN ESTÁTICA
    // ------------------

    // Inicializa el elemento
    // cuando estos están dispuestos de manera estática dentro del DOM
    BS.ModalInit() // Con esta linea inicializamos el módulo

    /*******************************************************************************/

    // 2 OPCIÓN DINÁMICA
    // -----------------   
    
    /*
        En proyectos donde se tabaja a través de injección de elementos a través 
        de JavaScript de manera dinámica, y el elemento que se estudia en esta sección se 
        ingresa de esta manera, es necesario aplicar un retraso en la inicialización del 
        módulo con el siguiente codigo.
    */

    //Si los elementos que conforman esta funcionalidad son dinámicos 
    // Agregados a través de JS 
    window.onload = () => {
        setTimeout( () => {
            BS.ModalInit()
        }, 100); 
    }

Muestra por Default

Se mostrará un modal por defecto con muy pocas cosas para determinar la estructura genera que lo compone.

El funcionamiento se basa en un elemento disparador que contiene la clase .activar-modal, luego a este mismo elementos hay que agregar el atributo data-target que contendrá el ID de la ventana modal.
Respecto a la ventana está compuesta con la siguiente estructura:
Notese que en la definición del elemento se utilizaron clases de Texto , de colores de fondo y de ancho y alto por porcentaje. A lo largo de la explicación de este elemento vamos a utilizar mas que solo las mencionadas. Cada diseño queda sujeto a las necesidades del proyecto en desarrollo.

Modal Dark

Ahora vamos a realizar el mismo modal pero de color oscuro y mostrar como a través de las clases de la biblioteca se puede obtener diversos resultados flexibles acorde a las necesidades.

Modal Formulario

Es muy común ver en diversos sitios como se establece los formularios en ventanas modals para realizar esto, y teniendo en cuenta la estructura vista realizaremos un modal con un formulario de login introducido en una ventana emergente. Es importante aclarar que para que el modal se ajuste a diversos tamaños de pantalla se utilizará las clases responsive de Ancho y Alto documentadas.

Modal Tabs

Otro de los elementos más comunes en las ventanas modals son los tabs que permiten a usuario seleccionar contenido a través de solapas que cumplen la función de menú.

Modal Cabecera y Pie

Es posible agregarle al modal una cabecera y un pie para aclarar el contenido y generar una visual más peronalizada.

Destroy

Los modales bienen con la funcionalidad que desvincula los elementos de la lógica que manejan a estos elementos, para ello hay que utilizar la función destroy. 

        // Dentro de dos etiquetas html script 
        // se destruyen las ventas modales
        BS.ModalDestroy()
Notará que después de presionar el botón "Desactivar Modals" las ventanas modales de la página dejaron de funcionar.
`r`n