O Modal Plugin
O plug-in Modal é uma janela de caixa de diálogo / pop-up que é exibida no topo da página atual:
Dica: Plugins podem ser incluídos individualmente (usando de Bootstrap individuais "modal.js" arquivo), 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ásica:
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>
Tente você mesmo " exemplo Explicado
O "Trigger" parte:
Para acionar a janela modal, você precisa usar um botão ou link.
Em seguida, incluir as duas data-* atributos:
-
data-toggle="modal"abre a janela modal -
data-target="#myModal"aponta para o id do modal
O "Modal" parte:
O pai <div> do modal deve ter um ID que é o mesmo que o valor do atributo-alvo de dados usadas para desencadear o modal ("myModal") .
O .modal classe identifica o conteúdo de <div> como um modal e traz foco para ele.
O .fade classe adiciona um efeito de transição que se desvanece o modal dentro e para fora. Remover esta classe se você não quiser este efeito.
O atributo role="dialog" melhora a acessibilidade para as pessoas que utilizam leitores de tela.
O .modal-dialog classe define a largura adequada e margem do modal.
A parte "conteúdo Modal":
O <div> com class="modal-content " estilos do modal (borda, cor de fundo, etc.). Dentro desta <div> , adicione do modal de cabeçalho, corpo e rodapé.
O .modal-header classe é usada para definir o estilo para o cabeçalho do modal. O <button> dentro do cabeçalho tem um data-dismiss="modal" atributo que fecha o modal se você clicar nele. Os .close estilos de classe o botão Fechar, e os .modal-title estilos de classe do cabeçalho com um line-height adequada.
O .modal-body classe é usada para definir o modelo para o corpo do modal. Adicionar qualquer marcação HTML aqui; parágrafos, imagens, vídeos, etc.
O .modal-footer classe é usada para definir o estilo para o rodapé do modal. Note-se que esta área está alinhado à direita por padrão.
modal Tamanho
Alterar o tamanho do modal adicionando o .modal-sm classe para pequenas modais ou .modal-lg classe para grandes modais.
Adicione a classe tamanho para o <div> elemento com classe .modal-dialog :
 | Por padrão, os modais são de tamanho médio. |
|---|
Conclua Bootstrap Modal Referência
Para uma referência completa de todas as opções modais, métodos e eventos, ir ao nosso Bootstrap JS Modal Referência .