English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Modal (Modal) Plugin

The Modal is a child window overlaying the parent window. Usually, the purpose is to display content from a separate source, which can have some interaction without leaving the parent window. The child window can provide information, interaction, etc.

if you want to refer to the functionality of the plugin separately, then you need to refer to modal.js. Or, as Overview of Bootstrap Plugins as mentioned in the chapter, you can refer to bootstrap.js or the compressed version bootstrap.min.js.

Usage

You can switch the hidden content of the Modal plugin:

  • via the data attributeset attributes on the control element (such as buttons or links) data-toggle="modal"and set data-target="#identifier" or href="#identifier" to specify the specific modal box (with id="identifier") to be switched.

  • Through JavaScript: Usando essa técnica, você pode chamar uma janela modal com id="identifier" em uma única linha de JavaScript:

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

Exemplo Online

Um exemplo estático de janela modal, conforme o exemplo a seguir:

Exemplo Online

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemplo do Bootstrap　-　Plugin de janela modal (Modal)/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Criar janela modal (Modal)</h2>
<!--　botão para acionar o modal　-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Comece a demonstrar o modal
</button>
<!--　Modal (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">
					Título do modal (Modal)
				</h4>
			</div>
			<div class="modal-body">
				Aqui você pode adicionar algum texto
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Fechar
				</button>
				<button type="button" class="btn btn-primary">
					Submeter alterações
				</button>
			</div>
		</div><!--　/.modal-content　-->
	</div><!--　/.modal　-->
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Explicação do código:

  • Para usar a janela modal, você precisa de algum tipo de gatilho. Você pode usar botões ou links. Aqui usamos botões.

  • Se você olhar atentamente o código acima, você verá que no tag <button>,data-target="#myModal" é o alvo que você deseja carregar na página. Você pode criar várias janelas modais na página e criar gatilhos diferentes para cada uma. Obviamente, você não pode carregar várias módulos ao mesmo tempo, mas você pode criar várias na página para serem carregadas em diferentes momentos.

  • Há dois pontos a serem notados na janela modal:

  • Primeiro é .modal, usado para identificar o conteúdo do <div> como uma janela modal.

  • Segundo é .fade Classe. Quando a janela modal é alternada, ela causa a transição de conteúdo de fade.

  • aria-labelledby="myModalLabel", este atributo referencia o título da janela modal.

  • Atributo aria-hidden="true" para manter a janela modal invisível até que o gatilho seja acionado (por exemplo, clicar em um botão relacionado).

  • <div>, modal-header é a classe que define estilos no cabeçalho da janela modal.

  • class="close", close é uma classe CSS usada para definir estilos no botão de fechamento da janela modal.

  • data-dismiss="modal", é um HTML personalizado5 Atributo data. Aqui ele é usado para fechar a janela modal.

  • class="modal-body", é uma classe CSS do Bootstrap, usada para definir estilos no corpo da janela modal.

  • class="modal-footer", é uma classe CSS do Bootstrap, usada para definir estilos no rodapé da janela modal.

  • data-toggle="modal", HTML5 Atributo data personalizado data-toggle para abrir a janela modal.

Opções

Existem algumas opções que podem ser usadas para personalizar a aparência e a sensação da janela modal (Modal Window), que são passadas através do atributo data ou JavaScript. A tabela a seguir lista essas opções:

Nome da opçãoTipo/Valor padrãoNome do atributo DataDescrição
backdropboolean ou string 'static'
Valor padrão: true		data-backdropEspecificar um fundo estático, o modal não será fechado ao clicar no exterior.
keyboardboolean
Valor padrão: true		data-keyboardFechar o modal ao pressionar a tecla escape, configurado como false o pressionamento de tecla é inválido.
showboolean
Valor padrão: true		data-showMostrar o modal ao inicializar.
remotepath
Valor padrão: false		data-remoteUsando jQuery .load Métodos, injetar conteúdo no corpo do modal. Se um href com URL válido for adicionado, o conteúdo será carregado. Veja os exemplos a seguir:
<a　data-toggle="modal"　href="remote.html"　data-target="#modal">Clique em mim</a>

Métodos

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

MétodosDescriçãoExemplo
Opções: .modal(opções)Ativar o conteúdo como modal. Aceita um objeto de opções opcional.
$('#identifier').modal({
keyboard: false
}
Alternar: .modal('toggle')Alternar manualmente o modal.
$('#identifier').modal('toggle')
Mostrar: .modal('show')Abrir manualmente o modal.
$('#identifier').modal('show')
Ocultar: .modal('hide')Ocultar manualmente o modal.
$('#identifier').modal('hide')

Exemplo Online

Abaixo estão alguns exemplos que demonstram o uso dos métodos:

Exemplo Online

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemplo do Bootstrap　-　Método do plug-in do Modal/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2Método do plug-in do Modal/h2>
<!--　botão para acionar o modal　-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Comece a demonstrar o modal
</button>
<!--　Modal (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">
					Título do modal (Modal)
				</h4>
			</div>
			<div class="modal-body">
				pressione o botão ESC para sair.
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"　
						data-dismiss="modal">Fechar
				</button>
				<button type="button" class="btn btn-primary">
					Submeter alterações
				</button>
			</div>
		</div><!--　/.modal-content　-->
	</div><!--　/.modal-dialog　-->
</div><!--　/.modal　-->
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Basta clicar na tecla ESC para fechar a janela modal.

Eventos

A tabela a seguir lista os eventos usados no modal. Esses eventos podem ser usados como ganchos em funções.

EventosDescriçãoExemplo
show.bs.modalao chamar o método show, é acionado.
$('#identifier').on('show.bs.modal', function () {
　　//　Execute algumas ações...
}
shown.bs.modalao modal estar visível para o usuário, é acionado (esperando o efeito de transição CSS ser concluído).
$('#identifier').on('shown.bs.modal', function () {
　　//　Execute algumas ações...
}
hide.bs.modalao chamar o método hide de exemplo, é acionado.
$('#identifier').on('hide.bs.modal', function () {
　　//　Execute algumas ações...
}
hidden.bs.modalAciona quando a janela modal está completamente oculta para o usuário.
$('#identifier').on('hidden.bs.modal', function () {
　　//　Execute algumas ações...
}

Exemplo Online

O exemplo a seguir demonstra o uso de eventos:

Os resultados são exibidos conforme abaixo:

Como mostrado no exemplo acima, se você clicar em fechar botão, ou seja ocultar Se um evento for acionado, uma mensagem de aviso será exibida.

Plugin de Menu Suspensível do BootstrapPlugin de Efeitos de Transição do Bootstrap