Explicar los complementos modales de Bootstrap

Posted on by Rudeus Greyrat

En este artículo, conoceremos los complementos modales de Bootstrap, además de comprender su implementación a través de los ejemplos. El Modal es una ventana secundaria o una ventana emergente que es visible sobre la página actual o el elemento principal. Generalmente se usa para mostrar otros datos o contenido de alguna otra fuente sin salir de la página actual. La ventana secundaria o modal puede contener datos, interacción y más. Bootstrap solo puede admitir una ventana modal a la vez.

Puede usar el atributo data-toggle=”modal” dentro de un elemento de controlador, como un botón o ancla junto con data-target=”id” o href=”id” para apuntar al modal particular que debe estar abierto en la página .

Clase modal Bootstrap:

Aquí están las diferentes clases que se pueden usar con el complemento modal:

  • .container: esta clase se utiliza para definir el elemento contenedor.
  • .row: Define la fila para el contenedor.
  • .col-md-12: Muestra las columnas que se tienen que mostrar dentro del contenedor.
  • .modal: Habilita el complemento modal.
  • .modal-dialog: Define el cuadro de diálogo para el modal.
  • .modal-content: Muestra el contenido del modal.
  • .modal-header: Aquí se especifica el encabezado del modal.
  • .modal-body: El contenido del cuerpo modal se puede escribir aquí.
  • .modal-footer: El pie de página consiste principalmente en botones que se definen aquí.

Atributos modales de Bootstrap :

  • data-bs-dismiss=”modal”: Elimina el modal actual de la página web.
  • data-bs-toggle=”modal”: Le dice al elemento que tiene que aparecer el modal al hacer clic sobre él.
  • data-bs-target=”myModal”: especifica el elemento cuyo modal debe eliminarse de la página web dándole la identificación del modal.

Aquí hay algunas clases para los diferentes tamaños modales:

Podemos usar las clases .modal-sm, .modal-lg y .modal-xl para mostrar modal en ventanas de diferentes tamaños.

  • .modal-sm: esta clase se usa para dimensionar el modal en la ventana de tamaño más pequeño.
  • .modal-lg: Proporciona el modal de gran tamaño para pantallas grandes.
  • .modal-xl: esta clase proporciona un modal de tamaño extra grande para pantallas más grandes.

NOTA: Modal es por defecto de tamaño mediano.

Sintaxis:

<button class="btn btn-primary" data-toggle="modal">
    Show modal
</button>
<div class="modal fade bd-example-modal-lg">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Estos son los complementos necesarios que deben insertarse dentro del archivo HTML:

<!----Bootstrap CSS CDN---->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet" 
      integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
       crossorigin="anonymous">

<!----Bootstrap JavaScript CDN---->
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" 
        integrity=
"sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" 
        crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" 
        integrity=
"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 
        crossorigin="anonymous">
</script>

Ejemplo: El siguiente ejemplo ilustra el uso de un complemento modal en Bootstrap.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
            integrity=
"sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
            integrity=
"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
            crossorigin="anonymous">
    </script>
    <title>Bootstrap Modal Plugin</title>
</head>
 
<body>
    <div class="text-center">
        <h2>GeeksforGeeks</h2>
        <h3>Bootstrap Modal Plugin</h3>
        <br>
        <div class="container center">
            <div class="row">
                <div class="col-md-12">
                    <div class="modal fade" id="myModal">
                        <div class="modal-dialog modal-md">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h2>
                                        Welcome to GeeksforGeeks Learning!
                                    </h2>
                                </div>
                                <div class="modal-body">
                                     
<p>A computer science portal for geeks.</p>
 
                                     
<p>Do you want to join?</p>
 
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-secondary">
                                        No, Thanks
                                    </button>
                                    <button class="btn btn-primary"
                                            data-bs-dismiss="modal">
                                        Yes, Offcourse
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-primary"
                            data-bs-toggle="modal"
                            data-bs-target="#myModal">
                        Show modal
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Ejemplo 2: El siguiente ejemplo demuestra el uso del modal de tamaño pequeño en Bootstrap.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
            integrity=
"sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
            integrity=
"sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
            crossorigin="anonymous">
    </script>
    <title>Bootstrap Modal Plugin</title>
</head>
 
<body>
    <div class="text-center">
        <h2>GeeksforGeeks</h2>
        <h3>Bootstrap Modal Plugin</h3>
        <br>
        <div class="container center">
            <div class="row">
                <div class="col-md-12">
                    <div class="modal fade" id="myModal">
                        <div class="modal-dialog modal-sm">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h3>
                                        Welcome to GeeksforGeeks Learning!
                                    </h3>
                                </div>
                                <div class="modal-body">
                                     
<p>A computer science portal for geeks.</p>
 
                                     
<p>Do you want to join?</p>
 
                                     
<p>I'm a small size modal</p>
 
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-secondary"
                                            data-bs-dismiss="modal">
                                        OK
                                    </button>
                                    <button class="btn btn-primary"
                                            data-bs-dismiss="modal">
                                        Yes, Offcourse
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-primary"
                            data-bs-toggle="modal"
                            data-bs-target="#myModal">
                        Show modal
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por abhisheksainiaggarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *