Modal é uma caixa de diálogo ou uma janela pop -up usada para fornecer informações importantes ao usuário antes de tomar qualquer ação ou avançar em uma página da web. Basicamente, os modais Bootstrap 5 são usados ​​para fornecer informações como tempo de sessão ou aparece quando um usuário está tentando excluir ou atualizar algo. Além disso, é usado para fins de confirmação ou para mostrar conteúdo oculto sob demanda.

Esse artigo é sobre

• Como criar um modal no bootstrap 5?
• Modal básico
• Adicione animação a um modal
• Tamanhos modais
• Modal centrado
• Modal de tela cheia
• Modal de tela cheia responsiva
• Rolando modal

Como criar um modal

Para criar um modal, primeiro crie uma div com .modal classe junto com sua única eu ia Em seguida, envolva esta div em torno de uma div com .modal-dialog classe, dentro desta div, crie outra div com o .conteúdo modal classe e dentro .conteúdo modal div criar mais três divs com o .Modal-header, .corpo modal, .Modal-Footer Aulas.

.Modal-header Div contém o título do modal e seu botão de demissão.

.corpo modal Div contém o conteúdo principal do modal.

.Modal-Footer Div contém os botões de controle do modal.

Modal básico

Para criar um modal básico, crie uma div que use .modal classe com único eu ia Depois disso, envolva esta div em torno dos divs contendo .modal-dialog, .conteúdo modal, .Modal-header, .corpo modal e .Modal-Footer classes como mostrado no exemplo.

Adicionar categorias

Este exemplo modal é para adicionar categorias

Aberto modal

Categorias

Adicionar
Fechar

É assim que um modelo básico é criado.

Adicione animação a um modal

Para adicionar animação ao seu uso modal .desaparecer classe com .modal aula:

..

É assim que a animação de desbotamento é aplicada no modal.

Sem animação

Remova o .desaparecer classe para abrir o modal sem qualquer animação.

..

É assim que uma aparência modal sem animação.

Tamanhos modais

Os modais podem ter três tamanhos:

• Pequeno
• Grande
• Extra grande

Pequeno modal

Para criar um pequeno modal, o .modal-sm A classe é usada:

..

É assim que um pequeno modal é criado.

Grande modal

Para criar um grande modal, o .modal-lg A classe é usada:

..

É assim que um grande modal é criado.

Modal extra grande

Para criar um modal extra grande, o .modal-xl A classe é usada:

..

É assim que um modal extra grande é criado.

Modais de tela cheia

Se você deseja que seu modal apareça na tela cheia, use .Modal-FullScreen classe com .modal-dialog aula.

..

É assim que um modal de tela cheia é criada.

Modais responsivos em tela cheia

Também podemos controlar quando o modal será exibido como um modal de tela cheia. Para isso, use as seguintes classes como seu requisito.

• .Modal-FullScreen-Sm-Down Esta aula mostra modal de tela cheia quando o tamanho da tela está abaixo de 576px.
• .Modal-FullScreen-Md-Down Esta aula mostra modal de tela cheia quando o tamanho da tela está abaixo de 768px.
• .Modal-FullScreen-LG-Down Esta aula mostra modal de tela cheia quando o tamanho da tela está abaixo de 992px.
• .Modal-FullScreen-Xl-Down Esta aula mostra modal de tela cheia quando o tamanho da tela está abaixo de 1200px.
• .modal-fullscreen-xxl-down Esta aula mostra modal de tela cheia quando o tamanho da tela está abaixo de 1400px.

Modal centrado

Usar .cental-dialog centrado classe com .modal-dialog para mostrar modal verticalmente e horizontalmente no centro da página.

..

Rolando modal

Uma barra de rolagem é adicionada automaticamente a uma página quando o conteúdo em um modelo é grande.

Portanto, não é uma boa abordagem rolar a página inteira, em vez de rolar o modal apenas para resolver esse problema, adicione uma classe .Modal-dialog-rolable com o .modal-dialog classe para tornar o modal rolável

..

Um modal rolável é criado com sucesso e funcionando perfeitamente bem.

Conclusão

Modal é criado usando o .modal classe que envolve outras divs contendo .modal-dialog, .conteúdo modal, .Modal-header, .corpo modal, .Modal-Footer . O artigo acima descreve a estrutura básica do modal de bootstrap 5 com um cabeçalho, corpo e rodapé que contêm botões de ação para o usuário. Além disso, ele mostra diferentes tipos modais, como tamanhos modais, modais com ou sem animação, modais modais centrados e responsivos à tela cheia.