JS Modal (modal.js)
O plug-in Modal é uma janela / caixa de pop-up de diálogo que é exibida na parte superior da página atual.
Para um tutorial sobre Modais, leia nossa Bootstrap Modal Tutorial .
As Classes Modal Plugin
| Classe | Descrição |
|---|---|
| .modal | Cria um modal |
| .modal-content | Estilos do modal corretamente com borda, cor de fundo, etc. Use esta classe para adicionar o modal de cabeçalho, corpo e rodapé. |
| .modal-header | Define o estilo para o cabeçalho do modal |
| .modal-body | Define o estilo para o corpo do modal |
| .modal-footer | Define o estilo para o rodapé no modal. Nota: Esta área é alinhado à direita por padrão. Para mudar isso, substituir CSS com text-align: left | center |
| .modal-sm | Especifica uma pequena modal |
| .modal-lg | Especifica um grande modal |
| .fade | Adiciona um efeito de animação / transição que se desvanece o modal dentro e fora |
Acionar o Modal Via data-* Atributos
Adicionar data-toggle="modal" e data-target="#modalID" a qualquer elemento.
Nota: Para <a> elementos, omitir data-target , e usar href="#modalID" em vez disso:
Exemplo
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open
Modal</button>
<!-- Links -->
<a data-toggle="modal"
href="#myModal">Open
Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open
Modal</p>
Tente você mesmo " Gatilho Via JavaScript
Habilitar manualmente com:
Opções modais
Opções podem ser passadas através de atributos de dados ou JavaScript. Para atributos de dados, acrescentar o nome de opção para de dados, como em data-backdrop="" .
| Nome | Digitar | Padrão | Descrição | Tente |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true | Especifica se o modal deve ter uma sobreposição escura:
Se você especificar o valor "static" , não é possível fechar o modal ao clicar fora dela | Usando JS Usando dados |
| keyboard | boolean | true | Especifica se o modal pode ser fechado com a tecla escape (Esc) :
| Usando JS Usando dados |
| show | boolean | true | Especifica se para mostrar o modal quando inicializado | Usando JS Usando dados |
Métodos modais
A tabela a seguir lista os métodos modais todos disponíveis.
| Método | Descrição | Tente |
|---|---|---|
| .modal( options ) | Ativa o conteúdo como um modal. Veja opções acima para valores válidos | Tente |
| .modal("toggle") | Alterna o modal | Tente |
| .modal("show") | Abre o modal | Tente |
| .modal("hide") | Esconde o modal | Tente |
modais Eventos
A tabela a seguir lista os eventos modais todos disponíveis.
| Evento | Descrição | Tente |
|---|---|---|
| show.bs.modal | Ocorre quando o modal está prestes a ser mostrado | Tente |
| shown.bs.modal | Ocorre quando o modal é totalmente mostrado (após transições CSS foram concluídas) | Tente |
| hide.bs.modal | Ocorre quando o modal é prestes a ser ocultado | Tente |
| hidden.bs.modal | Ocorre quando o modal está totalmente oculto (após transições CSS foram concluídas) | Tente |
Exemplos
Entrada Modal
O exemplo a seguir cria um modal para login:
Exemplo
<div class="container">
<h2>Modal Login Example</h2>
<!-- Trigger the modal with a button -->
<button type="button"
class="btn btn-default btn-lg" id="myBtn">Login</button>
<!--
Modal -->
<div class="modal fade" id="myModal" 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 style="color:red;"><span class="glyphicon glyphicon-lock"></span>
Login</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span>
Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter
email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter
password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon
glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left"
data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>
Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div> Tente você mesmo "