Como crear un pop-up, overlay o modal en Bootstrap

Publicado en Ene 19, 2018

En este tutorial aprendremos a crear un pop-up, overlay o ventana modal en Bootstrap de manera fácil. Este tipo de elementos suelen ser muy útil en cualquier aplicación web que desarrollemos usando este framework.

Lo primero que debes hacer es incluir bootstrap y jquery en tu proyecto. Ahora ya puedes usar Bootstrap sin problemas.

Para crear el modal en Bootstrap lo único que tenemos que hacer es un botón que lance la ventana emergente, veamos como hacerlo:

<!-- Botón en HTML (lanza el modal en Bootstrap) -->
<a href="#victorModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Abrir ventana modal</a>
 
<!-- Modal / Ventana / Overlay en HTML -->
<div id="victorModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">¿Estás seguro?</h4>
            </div>
            <div class="modal-body">
                <p>¿Seguro que quieres borrar este elemento?</p>
                <p class="text-warning"><small>Si lo borras, nunca podrás recuperarlo.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-danger">Eliminar</button>
            </div>
        </div>
    </div>
</div>

Con esto ya sabemos como crear una ventana modal en Bootstrap de manera muy sencilla.