Bootstrap - Plug-in Modal

Um modal é uma janela filho que é colocada em camadas sobre sua janela pai. Normalmente, o objetivo é exibir o conteúdo de uma fonte separada que pode ter alguma interação sem sair da janela principal. As janelas filhas podem fornecer informações, interação ou mais.

Se você deseja incluir esta funcionalidade de plug-in individualmente, você precisará modal.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir bootstrap.js ou bootstrap.min.js minimizado .

Uso

Você pode alternar o conteúdo oculto do plugin modal -

Via data attributes - Definir atributo data-toggle = "modal" em um elemento controlador, como um botão ou link, junto com um data-target = "#identifier" ou href = "#identifier" para direcionar um modal específico (com o id = "identificador") para alternar.
Via JavaScript - Usando essa técnica, você pode chamar um modal com id = "identificador" com uma única linha de JavaScript -

$('#identifier').modal(options)

Exemplo

Um exemplo de janela modal estática é mostrado no exemplo a seguir -

<h2>Example of creating Modals with Twitter Bootstrap</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

Details of the preceding code −

Para invocar a janela modal, você precisa ter algum tipo de gatilho. Você pode usar um botão ou um link. Aqui usamos um botão.
Se você olhar no código acima, verá que na tag <button>, o data-target = "#myModal"é o destino do modal que você deseja carregar na página. Este código permite que você crie vários modais na página e, em seguida, tenha diferentes gatilhos para cada um deles. Agora, para ser claro, você não carrega vários modais ao mesmo tempo, mas pode criar muitos nas páginas a serem carregadas em momentos diferentes.
Existem duas classes a serem observadas no modal -
- O primeiro é .modal, que é simplesmente identificar o conteúdo do <div> como um modal.
- E o segundo é o .fadeclasse. Quando o modal é alternado, ele fará com que o conteúdo apareça gradualmente.
aria-labelledby = "myModalLabel", o atributo faz referência ao título modal.
O atributo aria-hidden = "true" é usado para manter a janela modal invisível até que um gatilho aconteça (como um clique no botão associado).
<div class = "modal-header">, modal-header é a classe para definir o estilo do cabeçalho da janela modal.
class = "close", é um close de classe CSS que define o estilo do botão Fechar da janela modal.
data-dismiss = "modal", é um atributo de dados HTML5 personalizado. Aqui, ele é usado para fechar a janela modal.
class = "modal-body", é uma classe CSS do Bootstrap CSS para definir o estilo do corpo da janela modal.
class = "modal-footer", é uma classe CSS do Bootstrap CSS para definir o estilo do rodapé da janela modal.
data-toggle = "modal", A alternância de dados do atributo de dados personalizados HTML5 é usada para abrir a janela modal.

Opções

Existem certas opções que podem ser passadas por meio de atributos de dados ou JavaScript para personalizar a aparência da janela modal. A tabela a seguir lista as opções -

Nome da Opção	Tipo / valor padrão	Nome do atributo de dados	Descrição
pano de fundo	booleano ou a string 'estática' Padrão: verdadeiro	data-backdrop	Especifique estático para um pano de fundo, se você não quiser que o modal seja fechado quando o usuário clicar fora do modal.
teclado	booleano padrão: verdadeiro	teclado de dados	Fecha o modal quando a tecla Escape é pressionada; defina como falso para desativar.
exposição	booleano padrão: verdadeiro	data-show	Mostra o modal quando inicializado.
controlo remoto	caminho Padrão: falso	data-remote	Usando o método jQuery .load , injete conteúdo no corpo modal. Se um href com um URL válido for adicionado, ele carregará esse conteúdo. Um exemplo disso é mostrado abaixo - `<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>`

Métodos

Aqui estão alguns métodos úteis que podem ser usados com modal ().

Método	Descrição	Exemplo
Options - .modal (opções)	Ativa seu conteúdo como modal. Aceita um objeto de opções opcional.	`$('#identifier').modal({ keyboard: false })`
Toggle - .modal ('alternar')	Alterna manualmente um modal.	`$('#identifier').modal('toggle')`
Show - .modal ('mostrar')	Abre manualmente um modal.	`$('#identifier').modal('show')`
Hide - .modal ('ocultar')	Oculta manualmente um modal.	`$('#identifier').modal('hide')`

Exemplo

O exemplo a seguir demonstra o uso de métodos -

<h2>Example of using methods of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

Basta clicar no botão Esc para sair da janela modal.

Eventos

A tabela a seguir lista os eventos para trabalhar com modal. Esses eventos podem ser usados para conectar-se à função.

Evento	Descrição	Exemplo
show.bs.modal	Disparado após o método show ser chamado.	`$('#identifier').on('show.bs.modal', function () { // do something… })`
mostrado.bs.modal	Disparado quando o modal fica visível para o usuário (aguardará a conclusão das transições CSS).	`$('#identifier').on('shown.bs.modal', function () { // do something… })`
esconder.bs.modal	Disparado quando o método de instância de ocultar foi chamado.	`$('#identifier').on('hide.bs.modal', function () { // do something… })`
oculto.bs.modal	Disparado quando o modal termina de ser ocultado do usuário.	`$('#identifier').on('hidden.bs.modal', function () { // do something… })`

Exemplo

O exemplo a seguir demonstra o uso de eventos -

<h2>Example of using events of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

Como visto na tela acima, se você clicar no botão Fechar , ou seja, ocultar evento, uma mensagem de alerta será exibida.