Perú

Lima,Perú

Ventana Modal con Bootstrap

Fecha Publicación:       19 de Marzo de 2021
Fecha Modificación:       19 de Marzo de 2021

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">&times;</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/ 

Leidas : 307 Veces
Compartir: