Bootstrap Modal: es una ventana de diálogo que se abre dentro de la ventana del navegador al activar ciertos eventos. Es una forma realmente conveniente de mejorar la representación del contenido del sitio web según los requisitos.
En este artículo, nos centraremos en ajustar el ancho/alto del cuadro modal.
Método 1: uso de clases predefinidas de Bootstrap
Bootstrap tiene clases predefinidas para cambiar los atributos de dimensión modal que se usarán con el elemento div que contiene .modal-dialog . Estos se enumeran a continuación:
- Modal de pequeño tamaño: . modal-sm
- Modal mediano: . modal-md
- Modal de gran tamaño: . modal-lg
html
<!-- Small Bootstrap Modal Example --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container-fluid"> <h2>Small Modal</h2> <p> Other classes mentioned above are also implemented in the same manner. </p> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal" > Open Small-modal </button> <!-- Modal Code --> <div class="modal fade" id="modal" role="dialog"> <div class="modal-dialog modal-sm"> <!-- .modal-sm here makes a small modal Can be replaced with '.modal-md' & '.modal-lg' --> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> × </button> <h4 class="modal-title">GeeksforGeeks</h4> </div> <div class="modal-body"> <p>GeeksforGeeks - A computer science portal for geeks</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" > Close </button> </div> </div> </div> </div> </div> </body> </html>
Salida :
Método 2: Usar dimensiones personalizadas manipulando los atributos CSS predeterminados
También podemos personalizar el ancho/alto del modal cambiando las propiedades CSS para el div que contiene la clase .modal-dialog . A continuación se muestra la solución para el mismo.
Solución :
html
<!-- Changing CSS properties for the div
containing '.modal-dialog' class -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
.custom {
width: 600px;
min-height: 400px;
}
</style>
</head>
<body>
<div class="container-fluid">
<h2>Custom-sized Modal</h2>
<p>
We are changing CSS properties of div containing
the '.modal-dialog' to do the same.
</p>
<button
type="button"
class="btn btn-success"
data-toggle="modal"
data-target="#modal"
>
Open Custom-sized modal
</button>
<!-- Modal Code -->
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog">
<!-- '.custom' class added here to do the same -->
<div class="modal-content custom">
<div class="modal-header">
<button type="button"
class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">GeeksforGeeks</h4>
</div>
<div class="modal-body">
<p>GeeksforGeeks - A computer science
portal for geeks</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Salida :
Publicación traducida automáticamente
Artículo escrito por devproductify y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA