Ejemplo
Vista Previa
<!doctype html> <html> <head> <title>Prueba de Bootstrap 5</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"> </head> <body> <div class="container"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#dialogo1">Dialogo pequeño</button> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#dialogo2">Dialogo grande</button> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#dialogo3">Dialogo muy grande</button> <div class="modal fade" id="dialogo1"> <div class="modal-dialog modal-sm modal-dialog-centered"> <div class="modal-content"> <!-- cabecera del diálogo --> <div class="modal-header"> <h4 class="modal-title">Título del diálogo</h4> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <!-- cuerpo del diálogo --> <div class="modal-body"> Contenido del diálogo pequeño. Contenido del diálogo pequeño. Contenido del diálogo pequeño. Contenido del diálogo pequeño. </div> <!-- pie del diálogo --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button> </div> </div> </div> </div> <div class="modal fade" id="dialogo2"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <!-- cabecera del diálogo --> <div class="modal-header"> <h4 class="modal-title">Título del diálogo</h4> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <!-- cuerpo del diálogo --> <div class="modal-body"> Contenido del diálogo grande. Contenido del diálogo grande.Contenido del diálogo grande.Contenido del diálogo grande.Contenido del diálogo grande.Contenido del diálogo grande.Contenido del diálogo grande.Contenido del diálogo grande.Contenido del diálogo grande.Contenido del diálogo grande. </div> <!-- pie del diálogo --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button> </div> </div> </div> </div> <div class="modal fade" id="dialogo3"> <div class="modal-dialog modal-xl modal-dialog-centered"> <div class="modal-content"> <!-- cabecera del diálogo --> <div class="modal-header"> <h4 class="modal-title">Título del diálogo</h4> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <!-- cuerpo del diálogo --> <div class="modal-body"> Contenido del diálogo muy grande. Contenido del diálogo muy grande.Contenido del diálogo muy grande.Contenido del diálogo muy grande.Contenido del diálogo muy grande.Contenido del diálogo muy grande.Contenido del diálogo muy grande.Contenido del diálogo muy grande.Contenido del diálogo muy grande.Contenido del diálogo muy grande.Contenido del diálogo muy grande. </div> <!-- pie del diálogo --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script> </body> </html>
No tiene disponible el navegador la capacidad de iframe