Crear modal de Bootstrap

Desde formularios o mensajes las ventanas emergentes son de gran utilidad, Bootstrap te permite crear modal sin reescribir código.

Las librerías de Bootstrap traen condigo un extenso número de componentes para ser utilizadas en los sitios web.

Antes de comenzar recuerda tener los siguiente en tu carpeta del proyecto.

• Las librerías de Bootstrap
• JQuery

Crear un modal de Bootstrap

Abre o crea un archivo html y agrega los enlaces necesarios de las librerías de Bootstrap y JQuery.

Primero agregaremos en el cuerpo del archivo html el siguiente código, que es la estructura básica de un modal.

<div class="modal fade" id="EjemploModal" tabindex="-1" role="dialog" aria-labelledby="EjemploModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="EjemploModalLabel">Titulo</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            </div>
            <div class="modal-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione nemo placeat doloremque fugit quas quos repudiandae ducimus dignissimos unde laboriosam deserunt minus magni maxime veritatis necessitatibus obcaecati, praesentium cque!
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-primary">Guardar</button>
            </div>
        </div>
    </div>
</div>

Hay 3 secciones básicas del modal.

• Encabezado, ubicación del título del modal.
• Contenido o cuerpo, toda la información central del modal.
• Footer, regularmente ubicación de los botones de acción como cancelar o aceptar.

Es necesario que en el primer div coloques un id de acuerdo con el contenido del modal, anota este id para utilizarlo posteriormente.

Después de agregar la estructura del modal agregaremos un botón para invocar la ventana. Colocamos el siguiente código para el botón.

<button type="button" data-toggle="modal" data-target="#EjemploModal">Mostrar modal</button>

Las propiedades data-toggle y data-target son obligatorio para la ejecución del modal.

En data-target es importante colocar el id que le asignamos al modal, ejecuta el archivo html y veras un resultado similar a este.

Nota: como estamos utilizando archivos JavaScript es necesario ejecutar el archivo en un servidor web.

Podría interesarte Live server en Visual Studio Code  

Puedes personalizar el modal de acuerdo con la interfaz de tu sitio colocando imágenes o fonts icons en las secciones disponibles.