Bootstrap | Plugin modal
O componente modal de bootstrap é uma caixa de diálogo que aparece na tela. Ele mantém o conteúdo como título, texto, botões, etc. É fácil de usar e flexível para exibir conteúdo em um aplicativo da web. Além disso, você pode alterar sua aparência para se ajustar ao estilo do seu aplicativo.
Este artigo irá guiá-lo sobre:
- O que é um plugin modal?
- Como criar um modal no bootstrap?
- Como ajustar o tamanho modal no bootstrap?
O que é um plugin modal?
O plug -in modal usa atributos de javascript ou dados para abrir ou ocultar o conteúdo conforme necessário. Mais especificamente, é uma caixa de diálogo ou pop-up exibida na parte superior da página.
Como criar um modal no bootstrap?
Para criar um modal no bootstrap, siga as etapas mencionadas.
Etapa 1: crie um botão para acionar o modal
Primeiro, crie um botão que acione a janela modal usando o botão ou os elementos de link. Os principais atributos usados neste elemento são “Data-Toggle" e "alvo de dados”. Para fazer isso, consulte as seguintes instruções:
- O elemento do botão é criado usando o “btn","Btn-Primary", e "btn-lg" Aulas.
- Especifique o "Data-Toggle”Atributo que abre a janela modal.
- ““alvo de dados”Aponta para o ID do modal.
Aqui está o código HTML:
Saída
Etapa 2: Crie uma janela modal
A janela modal é criada seguindo as etapas:
- Adicione um “”Elemento e atribui o ID. Este ID deve corresponder ao “alvo de dados”Valor do atributo. No nosso caso, "Demomodal”É especificado como o ID do contêiner.
- ““modal”Classe destaca e reconhece o conteúdo da div como um modal.
- ““desaparecer”. Você pode remover facilmente esta classe se não quiser.
- ““modal-dialog”A classe ajusta a largura e a margem da caixa de diálogo modal. O conteúdo do modal é especificado no contêiner criado.
Aqui está a implementação do cenário discutido acima:
Etapa 3: especifique o conteúdo modal
O conteúdo do modal é especificado no contêiner Div com classe “modal-dialog”. As etapas abaixo são implementadas para adicionar conteúdo:
- Primeiro, adicione um “”Elemento com a classe“conteúdo modal”.
- Dentro disso, crie um cabeçalho, corpo e rodapé usando as classes “Modal-header","corpo modal", e "Modal-Footer”.
- Dentro do cabeçalho, especifique um botão de fechamento e o título usando o “Título modal" aula.
- Em seguida, especifique a parte do corpo utilizando o ”corpo modal" aula.
- Após o cabeçalho e o corpo, crie um rodapé aplicando o “Modal-Footer" aula. A parte do rodapé contém o botão que fechará a janela modal:
Linuxhint
Linuxhint é o melhor site de tutorial.
Saída
Como ajustar o tamanho modal no bootstrap?
O tamanho da janela modal pode ser determinado usando o “modal-*”Classe, onde o asterisco“*”O símbolo indica o tamanho da janela modal.
Pequena janela modal
No exemplo abaixo, o “”Elemento com classe“modal-dialog”É atribuído uma classe“modal-sm”:
Como resultado, a janela modal será aberta em um tamanho pequeno:
Grande janela modal
Agora, a classe “modal-lg”É especificado para abrir a janela modal em tamanho grande:
Saída
Isso é tudo sobre o plugin modal.
Conclusão
Para criar um modal no bootstrap, primeiro, crie um botão ou link que desencadeará o modal. Em seguida, crie a janela modal usando a classe “modal" e "modal-dialog”. Dentro do contêiner, especifique o conteúdo do modal usando o “conteúdo modal”. Utilize o “Título modal","corpo modal", e "Modal-Footer”Classes para adicionar o título do Modal, o corpo modal e o rodapé de Modal. Este post explicou o que é um plug -in modal e como criá -lo.