Arranque 4 | Modal

Posted on by Rudeus Greyrat

En palabras simples, el componente modal es un cuadro de diálogo/ventana emergente que se muestra en la parte superior de la página actual, una vez que se hace clic en el botón de activación. Sin embargo, al hacer clic en el fondo del modal se cierra automáticamente el modal. Además, debe tenerse en cuenta que Bootstrap no admite modales anidados, ya que crean una mala experiencia de interfaz de usuario para el usuario. Por lo tanto, solo se admite una ventana modal a la vez.

Para usar Bootstrap 4.0, descargue Bootstrap en la carpeta raíz de su proyecto o copie y pegue el siguiente enlace en la sección principal del código HTML.

Rutas requeridas:

<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integridad=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” origen cruzado=”anónimo” >

Sin embargo, hay muchos componentes de BootStrap que requieren varios complementos de JavaScript para funcionar bien. Esos complementos son jQuery, Popper.js y un complemento de JavaScript personal de Bootstrap. El siguiente fragmento de código debe colocarse justo antes de la etiqueta del cuerpo de cierre dentro de la etiqueta del script.

Complementos necesarios:

<guión src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integridad=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anónimo”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integridad=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anónimo ”></guion>

<guión src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integridad=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anónimo”></script>

    Cómo crear un modal Bootstrap: A continuación, el ejemplo aclarará el enfoque de cómo crear un modal Bootstrap.
    Ejemplo:

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
     <!-- Bootstrap CSS -->
     <link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
      crossorigin="anonymous">
     <title>bootstrap | Modal</title>
     <style>
        h1,h6 {
                margin: 2%;
              }
        .btn {
                margin-left: 2%;
              }
     </style>
    </head>
      
    <body>
     <center>
      <h1 style="color:green;">GeeksforGeeks</h1>
           
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" 
                          data-target="#exampleModal">Launch Modal</button>
        
      <!-- 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">
         <div class="modal-header">
           <h6 class="modal-title" id="exampleModalLabel" style="color:green;">
                                                             GeeksforGeeks</h6>
                           
           <!-- The title of the modal -->
          <button type="button" class="close" data-dismiss="modal"aria-label="Close">
           <span aria-hidden="true">×</span>
          </button>
         </div>
         <div class="modal-body"> 
                         
         <!-- The content inside the modal box -->
         <p>Articles that need little modification/improvement from reviewers
          are published first. To quickly get your articles reviewed, please 
          refer existing articles, their formating style, coding style, and try
          to make your close to them. </p>
        </div>
        <div class="modal-footer">
         <button type="button" class="btn btn-secondary" 
                                                 data-dismiss="modal">Close</button>
                         
          <!-- The close button in the bottom of the modal -->
         <button type="button" class="btn btn-primary">okay</button>
           
          <!-- The save changes button in the bottom of the modal -->
        </div>
       </div>
      </div>
     </div>
             
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
      crossorigin="anonymous">
     </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
      crossorigin="anonymous">
     </script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
      crossorigin="anonymous">
     </script>
     </center>
    </body>
      
    </html>

    Producción:

    Antes de lanzar el Modal:

    Después de lanzar el Modal:

    Cómo funciona Bootstrap Modal:

  • Los modales se construyen con HTML, CSS y JavaScript. Se colocan sobre todo lo demás en el documento y eliminan el desplazamiento del <cuerpo> para que el contenido modal se desplace en su lugar.
  • Al hacer clic en el «telón de fondo» modal, se cerrará el modal automáticamente.
  • Este modal solo admite una ventana modal a la vez.
  • Los modales usan position: fixed, que a veces puede ser un poco particular sobre su representación. Si es posible, coloque su HTML modal en una posición de nivel superior para evitar posibles interferencias de otros elementos.
  • Debido a la posición: fijo, hay algunas advertencias con el uso de modales en dispositivos móviles.
    Contenido modal de Bootstrap:

  • Uso de la cuadrícula: utilice el sistema de cuadrícula Bootstrap dentro de un modal anidando <b-container fluid> dentro del cuerpo modal; de lo contrario, puede usar el sistema de cuadrícula normal <b-row> (o <b-form-row>) y < b-col> como lo haría en cualquier otro lugar.
  • Información sobre herramientas y ventanas emergentes:

    Se utiliza una información sobre herramientas para proporcionar sugerencias textuales interactivas al usuario sobre el elemento cuando se mueve el puntero del mouse.

    El popover es un atributo de bootstrap que se puede usar para hacer que cualquier sitio web se vea más dinámico. Los popovers generalmente se usan para mostrar información adicional sobre cualquier elemento y se muestran al hacer clic con el puntero del mouse sobre ese elemento.

    Ejemplo:

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" 
         content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" 
         href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
         integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
         crossorigin="anonymous">
        <title>bootstrap | Modal</title>
        <style>
            h1,
            h6 {
                margin: 2%;
            }
              
            .btn {
                margin-left: 2%;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1 style="color:green;">GeeksforGeeks</h1>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" 
                    data-target="#exampleModal">
                Launch Modal
            </button>
            <!-- 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">
                        <div class="modal-header">
                            <h3 class="modal-title" id="exampleModalLabel" 
                                style="color:green;">
                             GeeksforGeeks</h3>
                            <!-- The title of the modal -->
                            <button type="button" class="close" data-dismiss="modal" 
                                    aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <!-- The content inside the modal box -->
                            <div class="container">
                                <p>This
                                    <button style="color:green;" data-toggle="popover"
                                     title="popover-title" data-content="popover-content">
                                        GeeksforGeeks
                                    </button>triggers a popover on click.</p>
                            </div>
      
                            <script>
                                $(document).ready(function() {
                                    $('[data-toggle="popover"]').popover();
                                });
                            </script>
                            <div class="container">
      
                                <p>This <a style="color:green;" data-toggle="tooltip" title="Tooltip">
                                    GeeksforGeeks
                                    </a> will show a tooltip on hover.
                                </p>
                            </div>
      
                            <script>
                                $(document).ready(function() {
                                    $('[data-toggle="tooltip"]').tooltip();
                                });
                            </script>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                Close</button>
                            <!-- The close button in the bottom of the modal -->
                            <button type="button" class="btn btn-primary">okay</button>
                            <!-- The save changes button in the bottom of the modal -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- Optional JavaScript -->
            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
             integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
             crossorigin="anonymous">
            </script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
             integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
             crossorigin="anonymous">
            </script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
             integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
             crossorigin="anonymous">
            </script>
        </center>
    </body>
      
    </html>

    Producción:

    Tamaño modal de Bootstrap: puede cambiar fácilmente el tamaño modal de Bootstrap como requisito utilizando .modal-sm para tamaño modal pequeño, .modal-lg para tamaño modal grande y .modal-xl para modal de tamaño extra grande. Puede agregar estas clases en la etiqueta <div> con la clase .modal-dialog .

  • Pequeño modal:

    <div class="modal-dialog modal-sm">
  • Modal grande:

    <div class="modal-dialog modal-lg">
  • Modal Extra Grande:

    <div class="modal-dialog modal-xl">
      Modal centrado: con el uso de la clase .modal-dialog-centered , puede centrar fácilmente el modal vertical y horizontalmente dentro de la página. Al igual que antes, solo necesita agregar «modal-dialog-centered» en la etiqueta <div> en el calss con el «modal-dialog».
      clase:

      <div class="<div class="modal-dialog modal-dialog-centered">
        Desplazamiento modal: esto es necesario cuando tiene un mensaje largo para mostrar en modal que ocupa un lugar grande en comparación con el tamaño modal en ese momento. -diálogo».
        clase:

        <div class="modal-dialog modal-dialog-scrollable">

Publicación traducida automáticamente

Artículo escrito por sanchit496 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 *