Plugin Modal de Bootstrap
O Plugin Modal
O plug-in Modal é uma caixa de diálogo/janela pop-up exibida na parte superior da página atual:
Dica: Os plug- ins podem ser incluídos individualmente (usando o arquivo "modal.js" individual do Bootstrap) ou todos de uma vez (usando "bootstrap.js" ou "bootstrap.min.js").
Como criar um modal
O exemplo a seguir mostra como criar um modal básico:
Exemplo
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Exemplo explicado
A parte "Gatilho":
Para acionar a janela modal, você precisa usar um botão ou um link.
Em seguida, inclua os dois atributos data-*:
data-toggle="modal"abre a janela modaldata-target="#myModal"aponta para o id do modal
A parte "modal":
O pai <div>do modal deve ter um ID que seja igual ao valor do atributo data-target usado para acionar o modal ("myModal").
A .modalclasse identifica o conteúdo de <div>como um modal e traz foco para ele.
A .fadeclasse adiciona um efeito de transição que faz o fade in e out do modal. Remova esta classe se você não quiser este efeito.
O atributo role="dialog"melhora a acessibilidade para pessoas que usam leitores de tela.
A .modal-dialogclasse define a largura e a margem apropriadas do modal.
A parte "Conteúdo modal":
O <div>with class="modal-content" estiliza o modal (borda, cor de fundo, etc.). Dentro dele <div>, adicione o cabeçalho, o corpo e o rodapé do modal.
A .modal-headerclasse é usada para definir o estilo do cabeçalho do modal. O <button>dentro do cabeçalho tem um data-dismiss="modal"atributo que fecha o modal se você clicar nele. A .closeclasse estiliza o botão Fechar e a .modal-titleclasse estiliza o cabeçalho com uma altura de linha adequada.
A .modal-bodyclasse é usada para definir o estilo para o corpo do modal. Adicione qualquer marcação HTML aqui; parágrafos, imagens, vídeos, etc.
A .modal-footerclasse é usada para definir o estilo do rodapé do modal. Observe que esta área é alinhada à direita por padrão.
Tamanho modal
Altere o tamanho do modal adicionando a .modal-sm
classe para modais pequenos ou .modal-lgclasse para modais grandes.
Adicione a classe de tamanho ao <div>elemento com class .modal-dialog:
Modal Pequeno
<div class="modal-dialog modal-sm">
Modal Grande
<div class="modal-dialog modal-lg">
Por padrão, os modais são de tamanho médio.
Referência Modal de Bootstrap Completa
Para uma referência completa de todas as opções modais, métodos e eventos, acesse nossa Referência Modal do Bootstrap JS .