Modais ou Lightbox
Boxes simplificados e flexíveis de diálogo que necessitam do minímo de funcionalidades para funcionar.
Exemplo estático
Um exemplo de modal com header, body e footer.
Demo
Abra o modal via JavaScript. Ele vai descer e fazer um efeito de fade a partir do topo da página.
Abrir modal
Crie modais acessíveis
Não esqueça de adicionar role="dialog" a sua div primária. No exemplo acima é a div#myModal
Também, o atributo aria-labelledby é referente ao título do modal, no exemplo é h4#myModalLabel.
Finalmente, aria-hidden="true" diz para tecnologias assistivas pularem o elemento DOM.
Opcionalmente, você pode dar uma descrição para o modal. Use o atributo aria-describedby na div primária do modal para tal.
Como Usar
Utilizando o atributo data.
Como ativar o modal sem escrever JavaScript. Use data-toggle="modal" no elemento que vai chama-lo, use também o data-target="#foo" ou href="#foo" para específicar o modal a ser aberto.
Via javaScript
Chame um modal com o id myModalcom apenas uma linha de JavaScript.
$('#myModal').modal(options)
Opções
Opções que podem ser passadas via atributo ou JavaScript. Para atributos, use o prefixo data-, por exemplo data-backdrop="".
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| backdrop | boolean | true | Inclui um elemento modal-backdrop. Como alternativa, use static para que o backdrop não feche o modal no 'click'. |
| keyboard | boolean | true | Fecha o modal quando o botão 'esc' é pressionado. |
| show | boolean | true | Mostra o modal logo que inicializado. |
| remote | path | false |
Se a URL remota é fornecida, o conteúdo será carregado via método load do jQuery injetado dentro do elemento raiz do modal. Se você estiver usando data api, você pode usar o atributo href="" para específicar a fonte remota. Um exemplo disso é mostrado abaixo: |
Métodos
.modal(options)
Ativa seu conteúdo como modal. Aceita um objeto de opções object.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Manualmente alterna um modal.
$('#myModal').modal('toggle')
.modal('show')
Abre um modal manualmente.
$('#myModal').modal('show')
.modal('hide')
Esconde um modal manualmente.
$('#myModal').modal('hide')
Eventos
O modal expôe alguns eventos para manipular algumas funcionalidades.
| Tipo de Evento | Descrição |
|---|---|
| show.bs.modal | Este evento dispara imediatamente quando o método show é chamado. |
| shown.bs.modal | Este evento é acionado quando o modal fica visível para o usuário (espera até a transição css estar completa). |
| hide.bs.modal | Este evento é disparado imediatamente quando o método de instância hide é chamado. |
| hidden.bs.modal | Este evento é disparado quando o modal deixou de ficar escondido para o usuário (espera completar a transição css). |
$('#myModal').on('hidden.bs.modal', function () {
// faça algo aqui…
})