TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear Bootstrap 5 Modal?

29

Bootstrap 5 Modal es básicamente una ventana emergente que se muestra al hacer clic en un elemento como un botón o un enlace de texto. Utiliza JavaScript para mostrar el contenido al hacer clic con efecto de caja de luz. La ventana emergente modal se puede cerrar haciendo clic en el botón cerrar o haciendo clic fuera de la ventana modal. Modal también se conoce con muchos otros nombres como ventana emergente, diálogo o alerta. Tenga en cuenta que esta alerta emergente es diferente al componente de alerta original de Bootstrap.

En este tutorial, creemos algunas ventanas emergentes modales para comprender los detalles del componente.

Tutorial modal de Bootstrap 5

Este tutorial cubre los siguientes temas:

  1. Modal activado al hacer clic en el botón
  2. Desplazamiento de contenido dentro de modal
  3. Dimensionamiento de modales
  4. Modal con información sobre herramientas y ventana emergente
  5. Usar diseño de cuadrícula dentro del contenido modal
  6. Personalización del componente modal

1 Creación de una modalidad simple activada al hacer clic en el botón

Un modal de Bootstrap contiene dos componentes: botón y ventana modal. A continuación se muestra el código del botón para un modal:

<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#Modal1"> Click to launch modal </button>

Como puede ver, no es más que un componente de botón con atributos adicionales:

  • El atributo data-toggle = "modal" se utiliza para identificar el botón como un componente modal.
  • El siguiente es el objetivo de datos = "# Modal1 ″, que es un ID que debe ser único. Este mismo ID debe usarse en el componente modal.

A continuación se muestra el código para la ventana emergente modal, debe usar este código entre la sección del cuerpo de la plantilla de inicio de Bootstrap.

<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of the modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning">Save</button> </div> </div> </div> </div>

Hay varias clases de CSS utilizadas en un componente modal:

  • El contenedor div externo debe tener una clase CSS ".modal". La clase adicional ".fade" se utiliza para atenuar el cuadro modal, que es opcional.

  • El ID debe ser el mismo que el valor de ID configurado para el componente del botón.

  • Asegúrese de agregar otros atributos como tabindex, role y aria-hidden.

  • El contenido modal debe agregarse dentro

    etiquetas identificadas con la clase ".modal-dialog".

  • Modal tiene una estructura de panel o tarjeta que tiene clases de contenido, encabezado, título, cuerpo y pie de página.

  • Todas las partes del modal deben estar envueltas dentro de un

    con la clase ".modal-content".

  • La sección de encabezado se identifica con la clase ".modal-header" y tiene dos componentes: título y botón. El componente de título usa ".modal-title" y se usa para agregar un encabezado a la ventana emergente modal. Los componentes del botón se utilizan para incluir el icono de cierre (X) para cerrar el cuadro de diálogo modal.

  • El cuerpo modal usa la clase ".modal-body" y contiene el cuerpo del modal, que puede ser cualquier elemento como texto, botón, información sobre herramientas o popover.

  • La sección de pie de página usa ".modal-footer" y contiene dos botones, uno para cerrar y otro para guardar. El botón cerrar cerrará la ventana emergente modal. Pero el botón guardar es un botón ficticio y debe agregar su propio código para guardar los documentos en el servidor.

La salida final simplemente se verá como un botón y al hacer clic en él se activará un cuadro modal emergente.

¿Cómo crear Bootstrap 5 Modal?

Bootstrap Modal

Puede agregar cualquier tipo de contenido dentro de la sección de cuerpo modal y también tener variaciones en las secciones de encabezado y pie de página.

2 Crear modal con contenido de desplazamiento

Cuando la longitud del contenido es larga, se puede desplazar dentro del modal sin desplazarse por la página exterior. A continuación se muestra el código para crear una ventana emergente modal desplazable.

<button type="button" class="btn btn-danger btn-md" data-toggle="modal" data-target="#Modal2"> Open modal </button> <div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="Modal2" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Modal with Scrolling Content</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here is the content for modal, enter lengthy content so that you can see the scrolling effect. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-info btn-md">Save</button> </div> </div> </div> </div>

El modo de desplazamiento se verá a continuación:

¿Cómo crear Bootstrap 5 Modal?

Contenido modal desplazable

3 Dimensionamiento de Modales

El tamaño aquí indica el ancho del modal. Puede aumentar o disminuir el tamaño agregando la clase ".modal-lg" o ".modal-sm" a la clase ".modal-dialog".

El código completo del cuadro modal más grande se proporciona a continuación:

<button class="btn btn-primary" data-toggle="modal" data-target=".example-modal-lg">Large modal</button> <div class="modal fade example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="LargeModal" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Large Modal Title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of large modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Close</button> <button type="button" class="btn btn-danger">Save</button> </div> </div> </div> </div>

De manera similar, el código completo para el cuadro modal más pequeño es el siguiente:

<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".example-modal-sm">Small modal</button> <div class="modal fade example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="SmallModal" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Small Modal Title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of small modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary">Save</button> </div> </div> </div> </div>

Puede ver tamaños modales más grandes, predeterminados y más pequeños como se muestra a continuación.

¿Cómo crear Bootstrap 5 Modal?

Modal más grande

¿Cómo crear Bootstrap 5 Modal?

Modal predeterminado

¿Cómo crear Bootstrap 5 Modal?

Modal más pequeño

4 modal con información sobre herramientas y popover

También es posible insertar información sobre herramientas y ventanas emergentes dentro del contenido modal. A continuación se muestra el código para hacer eso:

<!-- Button trigger for modal --> <button type="button" class="btn btn-secondary btn-md" data-toggle="modal" data-target="#Modaltooltip"> Modal with Popover and Tooltip </button> <!-- Modal --> <div class="modal fade" id="Modaltooltip" tabindex="-1" role="dialog" aria-labelledby="Modaltooltip" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <h5>Popover in Modal</h5> <p>Click button for popover. <a href="#" role="button" class="btn btn-dark" title="Popover Title" data-content="Enter content to be shown inside popover" data-toggle="popover">button</a></p> <hr> <h5>Tooltip in Modal</h5> <p>Hover over <a href="#" title="Tooltip on Top" data-toggle="tooltip">this hyperlink</a> to see a tooltip.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

La información sobre herramientas y la ventana emergente se verán a continuación. La información sobre herramientas se mostrará en la parte superior al pasar el mouse y la ventana emergente se mostrará en la izquierda al hacer clic.

¿Cómo crear Bootstrap 5 Modal?

Popover e información sobre herramientas dentro del contenido modal

Nota: Recuerde que la información sobre herramientas y la ventana emergente necesitan JavaScript Popper adicional junto con los archivos de script Bootstrap. Obtenga más información sobre la información sobre herramientas de Bootstrap y los componentes emergentes de Bootstrap.

5 Insertar diseño de cuadrícula dentro del contenido modal

Bootstrap tiene un poderoso sistema de diseño de cuadrícula flexbox. Puede insertar fácilmente contenido dentro del modal utilizando columnas de diseño de cuadrícula. A continuación se muestra un ejemplo para insertar diferentes tipos de columnas de cuadrícula dentro de un modal.

<button type="button" class="btn btn-dark btn-md" data-toggle="modal" data-target="#Modalgrid"> Modal with Grid </button> <div class="modal fade" id="Modalgrid" tabindex="-1" role="dialog" aria-labelledby="Modalgrid" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container-fluid"> <div class="gridmodal"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div> <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div> </div> <div class="row"> <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div> </div> <div class="row"> <div class="col-sm-9"> .col-sm-9 <div class="row"> <div class="col-8 col-sm-6"> .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> .col-4 .col-sm-6 </div> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

Debería verse como a continuación en el navegador:

¿Cómo crear Bootstrap 5 Modal?

Modal con contenido de diseño de cuadrícula

6 Personalización del componente modal Bootstrap

Como puede ver, la última versión de Bootstrap le permite agregar cualquier tipo de contenido dentro de la ventana emergente modal. Puede personalizar el color, los bordes y el aspecto de cada elemento dentro del modal mediante CSS adicional adicional por su cuenta. Por ejemplo, en el ejemplo de cuadrícula anterior, hemos utilizado una clase CSS personalizada ".gridmodal" para agregar fondo, borde y espaciado como se muestra a continuación.

<style> .gridmodal .row>[class^=col-] { padding-top: .75rem; padding-bottom: .75rem; margin-bottom: .75em; background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.2); } </style>

También puede agregar la clase CSS a las clases Bootstrap predeterminadas. Por ejemplo, cuando desee agregar un efecto de sombra a los botones modales, simplemente puede agregar la clase "btn-md" como se muestra a continuación.

<!-- Button trigger for modal --> <button type="button" class="btn btn-secondary btn-md" data-toggle="modal" data-target="#Modal1"> Click to launch modal </button> <!-- Modal --> <div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of the modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

Hemos agregado la clase personalizada "btn-md" a los tres componentes del botón y el resultado se mostrará como se muestra a continuación en el navegador:

¿Cómo crear Bootstrap 5 Modal?

Botones con efecto de sombra

El CSS personalizado para la clase "btn-md" se proporciona a continuación, que se puede agregar dentro de la parte del encabezado de la página HTML dentro de las etiquetas …. O puede agregar el código en un archivo CSS externo (probablemente el style.css de su tema “y vincular el CSS en el encabezado.

.btn-md { border-width: 0; outline: none; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); cursor: pointer; }

Terminando

Los modales son una forma sencilla de mostrar contenido en un cuadro de diálogo emergente. Esto ayuda mucho a enfocarse en el contenido principal que se ofrece en la página. Los usuarios interesados ​​pueden hacer clic en el enlace o botón para invocar las ventanas modales y seguir leyendo.


Aprenda Bootstrap 5 (índice )


Fuente de grabación: webnots.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More