Bootstrap : Ventana Modal
Fecha Publicación:
19 de Marzo de 2021
Fecha Modificación:
12 de Abril de 2024
Implementación Bootstrap:
Incluyendo los archivos desde CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
Nota: puedes descargar los archivos a una carpeta en mi caso lo puse en la carpeta librerias y desde ali llamarlo para que sea mas legible.
<script src="/librerias/jquery-3.5.1.slim.min.js"></script>
<link rel="stylesheet" href="/librerias/bootstrap/bootstrap.min.css">
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="/librerias/bootstrap/bootstrap.bundle.min.js"></script>
Referencia Implementación Bootstrap: https://getbootstrap.com/docs/4.6/getting-started/introduction/
Implementación Formulario Modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
COMPARTIR
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body ">
<!------Contenido -->
<!------Contenido -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Referencia Modal: https://getbootstrap.com/docs/4.6/components/modal/
Articulo : 3960 - Veces Leidas