Corso di base Bootstrap

Plugin Bootstrap

Plugin di Menu a Discesa Bootstrap Plugin di Effetti di Transizione Bootstrap

Plugin Bootstrap Modale (Modal)

La finestra modale (Modal) è una finestra secondaria che copre la finestra principale. Di solito, l'obiettivo è mostrare il contenuto di una fonte separata, con la possibilità di interagire senza lasciare la finestra principale. La finestra secondaria può fornire informazioni, interazioni, ecc.

如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览正如本章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以切换模态框(Modal)插件的隐藏内容：

通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：
```
$('#identifier').modal(options)
```

Esempio Online

一个静态的模态窗口示例，如下面的示例所示：

Esempio Online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap　示例　-　模态框(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>创建模态框(Modal)</h2>
<!-- Bottone che attiva il modale -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Inizia la dimostrazione del modale
</button>
<!-- Modale (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">
					Titolo della finestra modale (Modal)
				</h4>
			</div>
			<div class="modal-body">
				在这里添加一些文本
			</div>
			<div class="modal-footer">
				<button　type="button"　class="btn　btn-default"　data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary">
					Conferma modifiche
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</body>
</html>

Prova a vedere <‹/›

I risultati sono come segue:

代码讲解：

使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
如果您仔细查看上面的代码，您会发现在 <button> 标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
在模态框中需要注意两点：
Primo è .modal，用于将 <div> 的内容识别为模态框。
Secondo è .fade class. Quando la finestra modale viene切换，它会引起内容淡入淡出。
aria-labelledby="myModalLabel"，l'attributo si riferisce al titolo della finestra modale.
Attributo aria-hidden="true" Utilizzato per mantenere invisibile la finestra modale fino a quando il trigger non viene attivato (ad esempio, cliccando su un pulsante correlato).
<div>，modal-header è la classe utilizzata per definire lo stile della testa della finestra modale.
class="close"，close è una classe CSS utilizzata per impostare lo stile del pulsante di chiusura della finestra modale.
data-dismiss="modal"，è un attributo data HTML5 personalizzato. Qui viene utilizzato per chiudere la finestra modale.
class="modal-body"，è una classe CSS di Bootstrap utilizzata per impostare lo stile del corpo della finestra modale.
class="modal-footer"，è una classe CSS di Bootstrap utilizzata per impostare lo stile del fondo della finestra modale.
data-toggle="modal"，l'attributo data-toggle HTML5 personalizzato utilizzato per aprire la finestra modale.

Opzioni

Alcune opzioni possono essere utilizzate per personalizzare l'aspetto e la sensazione della finestra modale (Modal Window), che vengono trasmesse tramite attributi data o JavaScript. La seguente tabella elenca queste opzioni:

Nome delle opzioni	Tipo/Valore predefinito	Nome dell'attributo Data	Descrizione
backdrop	boolean o stringa 'static' Valore predefinito: true	data-backdrop	Specificare un sfondo statico, la finestra modale non verrà chiusa quando l'utente clicca fuori di essa.
keyboard	boolean Valore predefinito: true	data-keyboard	Chiude la finestra modale quando si preme il tasto escape, impostato a false il tasto non ha effetto.
show	boolean Valore predefinito: true	data-show	Visualizza la finestra modale all'inizializzazione.
remote	path Valore predefinito: false	data-remote	Utilizzo di jQuery .load Metodo, per inserire il contenuto del corpo della finestra modale. Se viene aggiunto un href con un URL valido, caricherà il contenuto. Come mostrato nell'esempio seguente: <a data-toggle="modal" href="remote.html" data-target="#modal">Clicca qui</a>

Metodi

Di seguito sono elencati alcuni metodi utili che possono essere utilizzati insieme a modal().

Metodi	Descrizione	Esempio
Opzioni: .modal(options)	Attiva il contenuto come modale. Accetta un oggetto opzionale di opzioni.	$('#identifier').modal({ keyboard: false })
Cambia: .modal('toggle')	Cambia manualmente lo stato del modale.	$('#identifier').modal('toggle')
Mostra: .modal('show')	Apri manualmente il modale.	$('#identifier').modal('show')
Nascondi: .modal('hide')	Nascondi manualmente il modale.	$('#identifier').modal('hide')

Esempio Online

Di seguito è riportato un esempio di utilizzo dei metodi:

Esempio Online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Esempio - Metodi del plugin Modale (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>Metodi del plugin Modale (Modal)</h2>
<!-- Bottone che attiva il modale -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Inizia la dimostrazione del modale
</button>
<!-- Modale (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">
					Titolo della finestra modale (Modal)
				</h4>
			</div>
			<div class="modal-body">
				Premere il pulsante ESC per uscire.
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"　
						data-dismiss="modal">Chiudi
				</button>
				<button type="button" class="btn btn-primary">
					Conferma modifiche
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>

Prova a vedere <‹/›

I risultati sono come segue:

Basta premere il tasto ESC per chiudere la finestra modale.

Eventi

La tabella sottostante elenca gli eventi utilizzati nella finestra modale. Questi eventi possono essere utilizzati come hook nelle funzioni.

Eventi	Descrizione	Esempio
show.bs.modal	Viene attivato dopo aver chiamato il metodo show.	$('#identifier').on('show.bs.modal', function () { 　　//Esegui alcune azioni... })
shown.bs.modal	Viene attivato quando la finestra modale è visibile all'utente (in attesa che l'effetto di transizione CSS sia completato).	$('#identifier').on('shown.bs.modal', function () { 　　//Esegui alcune azioni... })
hide.bs.modal	Quando si chiama il metodo di esempio hide viene attivato.	$('#identifier').on('hide.bs.modal', function () { 　　//Esegui alcune azioni... })
hidden.bs.modal	Viene attivato quando la finestra modale è completamente nascosta all'utente.	$('#identifier').on('hidden.bs.modal', function () { 　　//Esegui alcune azioni... })

Esempio Online

Esempio di utilizzo dell'evento seguente:

I risultati sono come segue:

Come mostrato nell'esempio sopra, se hai cliccato su chiudi pulsante, ossia nascondi Evento, verrà visualizzato un messaggio di avviso.

Plugin di Menu a Discesa Bootstrap Plugin di Effetti di Transizione Bootstrap