El complemento modal nos permite agregar una ventana emergente de diálogo que se muestra en la parte superior de la página actual. Bootstrap proporciona una manera fácil pero efectiva de incorporar modal en nuestras páginas web. Modal puede constar de cualquier contenido junto con un encabezado y un pie de página.
Las imágenes se pueden ajustar en una ventana emergente modal usando Bootstrap al incluir la etiqueta <img> en el div «modal-body» . El div «modal-body» determina el contenido principal de la ventana emergente modal. Al usar la etiqueta <img> , se puede insertar una imagen en ella.
Esto se ilustra en el siguiente ejemplo:
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity= "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <body> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Click to view modal </button> <!--Bootstrap modal --> <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"> <!-- Modal heading --> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"> GeeksforGeeks </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"> × </span> </button> </div> <!-- Modal body with image --> <div class="modal-body"> <img src="gfg.png" /> </div> </div> </div> </div> <script src= "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity= "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity= "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"> </script> </body> </html>
Producción:
Ejemplo 2: aquí se ha utilizado una imagen en lugar del botón, que activa una ventana emergente modal al hacer clic. El contenido de modal se ha alineado al centro usando «text-align: center». Se agregó la clase «w-100» al título modal para que ocupe el 100 % del ancho del div principal y se alinee al centro debido a «text-align: center».
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<style>
/* Content of modal div is center aligned */
.modal {
text-align: center;
}
</style>
</head>
<body>
<img src="gfg.png" data-toggle="modal"
data-target="#exampleModal">
<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">
<!-- w-100 class so that header
div covers 100% width of parent div -->
<h5 class="modal-title w-100"
id="exampleModalLabel">
GeeksForGeeks
</h5>
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<!--Modal body with image-->
<div class="modal-body">
<img src="gfg.png" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger"
data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity=
"sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity=
"sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous">
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por riyakalra59 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA