Bootstrap Basic Tutorial

Bootstrap Plugin

Plugin de menu deroulant Bootstrap Plugin d'effet de transition Bootstrap

Bootstrap Modal (Modal) Plugin

The Modal is a child window that overlays 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 Bootstrap Plugin Overview 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:

through the data attributeSet properties on the control element (such as buttons or links) by 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：En utilisant cette technique, vous pouvez appeler une boîte modale avec id="identifier" en une seule ligne de JavaScript :
```
$('#identifier').modal(options)
```

Exemples en ligne

Un exemple de fenêtre modale statique, comme dans l'exemple suivant :

Exemples en ligne

示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemple Bootstrap　-　Plugin de boîte 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>Créer une boîte modale (Modal)</h2>
<!--　按钮触发模态框　-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</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">
					模态框(Modal)标题
				</h4>
			</div>
			<div class="modal-body">
				Ajoutez quelques textes ici
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"　data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary">
					提交更改
				</button>
			</div>
		</div><!--　/.modal-content　-->
	</div><!--　/.modal　-->
</div>
</body>
</html>

测试看看 ‹/›

Les résultats sont affichés comme suit :

Explication du code :

Pour utiliser la fenêtre modale, vous avez besoin d'un déclencheur. Vous pouvez utiliser un bouton ou un lien. Ici, nous utilisons un bouton.
Si vous regardez attentivement le code ci-dessus, vous remarquerez que dans l'étiquette <button>,data-target="#myModal" est l'objectif de la boîte modale que vous souhaitez charger sur la page. Vous pouvez créer plusieurs boîtes modales sur la page et créer des déclencheurs différents pour chaque boîte modale. Il est évident que vous ne pouvez pas charger plusieurs modules en même temps, mais vous pouvez créer plusieurs boîtes modales qui seront chargées à différents moments.
Il y a deux points à noter dans la boîte modale :
Premier .modal, utilisé pour identifier le contenu du <div> comme une boîte modale.
Deuxième .fade Classe. Lorsque la boîte modale est basculée, elle provoque une transition de contenu en fondu/fondu.
aria-labelledby="myModalLabel", cet attribut fait référence au titre de la boîte modale.
Attribut aria-hidden="true" est utilisé pour garder la fenêtre modale invisible jusqu'à ce que le déclencheur soit activé (par exemple, un clic sur un bouton pertinent).
<div>, modal-header est une classe définissant le style de l'en-tête de la fenêtre modale.
class="close", close est une classe CSS, utilisée pour définir le style du bouton de fermeture de la fenêtre modale.
data-dismiss="modal", est un HTML personnalisé5 Attribut data. Ici, il est utilisé pour fermer la fenêtre modale.
class="modal-body", est une classe CSS de Bootstrap CSS, utilisée pour définir le style du corps de la fenêtre modale.
class="modal-footer", est une classe CSS de Bootstrap CSS, utilisée pour définir le style du bas de la fenêtre modale.
data-toggle="modal", HTML5 Attribut data personnalisé data-toggle est utilisé pour ouvrir la fenêtre modale.

Option

Il existe plusieurs options permettant de personnaliser l'apparence et l'expérience de la fenêtre modale (Modal Window), qui sont transmises via l'attribut data ou JavaScript. Le tableau suivant liste ces options :

Nom de l'option	Type/Valeur par défaut	Nom de l'attribut Data	描述
backdrop	boolean ou string 'static' Valeur par défaut : true	data-backdrop	Spécifier un arrière-plan statique, le modal ne se fermera pas lorsque l'utilisateur cliquera en dehors de celui-ci.
keyboard	boolean Valeur par défaut : true	data-keyboard	Fermer le modal lorsque la touche d'échappement est pressée, réglé à false, la touche est inerte.
show	boolean Valeur par défaut : true	data-show	Afficher le modal à l'initialisation.
remote	path Valeur par défaut : false	data-remote	Utilisation de jQuery .load Méthode, injecter du contenu dans le corps du modal. Si un href avec une URL valide est ajouté, le contenu de celle-ci sera chargé. Voici un exemple : <a　data-toggle="modal"　href="remote.html"　data-target="#modal">Cliquez-moi</a>

Méthodes

Voici quelques méthodes utiles qui peuvent être utilisées avec modal() :

Méthodes	描述	示例
Options : .modal(options)	Activer le modal avec le contenu. Accepte un objet d'options optionnel.	$('#identifier').modal({ keyboard: false )
Toggle : .modal('toggle')	Basculer manuellement le modal.	$('#identifier').modal('toggle')
Show : .modal('show')	Ouvrir manuellement le modal.	$('#identifier').modal('show')
Hide : .modal('hide')	Masquer manuellement le modal.	$('#identifier').modal('hide')

Exemples en ligne

Les exemples suivants montrent l'utilisation des méthodes :

Exemples en ligne

示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemple Bootstrap　-　Méthode de plugin 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éthode de plugin Modal/h2>
<!--　按钮触发模态框　-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</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">
					模态框(Modal)标题
				</h4>
			</div>
			<div class="modal-body">
				按下 ESC 按钮退出。
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"　
						data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary">
					提交更改
				</button>
			</div>
		</div><!--　/.modal-content　-->
	</div><!--　/.modal-dialog　-->
</div><!--　/.modal　-->
</body>
</html>

测试看看 ‹/›

Les résultats sont affichés comme suit :

只需要点击 ESC 键，模态窗口即会退出。

事件

下表列出了模态框中要用到的事件。这些事件可在函数中作为钩子使用。

事件	描述	示例
show.bs.modal	在调用 show 方法后触发。	$('#identifier').on('show.bs.modal', function () { 　　//　Effectuer certaines actions... )
shown.bs.modal	当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。	$('#identifier').on('shown.bs.modal', function () { 　　//　Effectuer certaines actions... )
hide.bs.modal	当调用 hide 示例方法时触发。	$('#identifier').on('hide.bs.modal', function () { 　　//　Effectuer certaines actions... )
hidden.bs.modal	Déclenché lorsque la boîte de dialogue est complètement cachée pour l'utilisateur.	$('#identifier').on('hidden.bs.modal', function () { 　　//　Effectuer certaines actions... )

Exemples en ligne

Le siguiente ejemplo muestra el uso des eventos :

Les résultats sont affichés comme suit :

Comme indiqué dans l'exemple ci-dessus, si vous cliquez sur fermer bouton, c'est-à-dire cacher Un événement, une message d'avertissement s'affichera.

Plugin de menu deroulant Bootstrap Plugin d'effet de transition Bootstrap