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

Bootstrap基本教程

Bootstrapプラグイン

Bootstrapモーダル（Modal）プラグイン

モーダル（Modal）は、親フレームに覆われたサブフレームです。通常、独立したソースからの内容を表示し、親フレームを離れることなくいくつかのインタラクションを行うことを目的としています。サブフレームは情報やインタラクションを提供できます。

プラグインの機能を単独で参照したい場合は、以下を参照する必要があります： modal.js。または、以下のように、 Bootstrapプラグイン概要 第1章に記載されているように、以下を参照できます： bootstrap.js または圧縮版の bootstrap.min.js。

使い方

モーダル（Modal）プラグインの隠された内容を切り替えることができます：

  • data属性を通じてコントローラーエレメント（ボタンやリンクなど）に属性を設定します。 data-toggle="modal"、同時に設定します： data-target="#identifier" または href="#identifier" 特定のモーダルフレーム（id="identifier"を持つもの）を切り替えることを指定します。

  • JavaScriptを通じて：この技術を使用すると、id="identifier"のモーダルフレームを簡単に一行のJavaScriptで呼び出すことができます：

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

オンラインサンプル

以下の例のように、静的なモーダルウィンドウの例を示します：

オンラインサンプル

!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>モーダルフレームを作成</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">
				ここにテキストを追加します
			</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>
テストを見てみる ‹/›

以下の結果が表示されます：

コード解説：

  • モーダルウィンドウを使用するには、ある種のトリガーが必要です。ボタンやリンクを使用できます。ここでは、ボタンを使用しています。

  • 上記のコードを詳細に確認すると、<button>タグ内で、data-target="#myModal" は、ページにロードしたいモーダルフレームのターゲットです。ページに複数のモーダルフレームを作成し、各モーダルフレームに対して異なるトリガーを作成できます。明らかに、同時に複数のモジュールをロードすることはできませんが、ページに複数のモーダルフレームを作成して、異なるタイミングでロードすることができます。

  • モーダルフレームでは注意すべき点が2つあります：

  • まず .modal、<div>の内容をモーダルフレームとして認識するために使用されます。

  • 次に .fade クラス。モーダルフレームが切り替わると、内容がフェードイン/アウトします。

  • aria-labelledby="myModalLabel"、この属性はモーダルフレームのタイトルを参照します。

  • 属性 aria-hidden="true" を使用して、トリガーが発生するまで（例えば、関連するボタンをクリックする場合）モーダルウィンドウが見えないようにします。

  • <div>、modal-headerはモーダルウィンドウのヘッダーのスタイルを定義するクラスです。

  • class="close"、closeはモーダルウィンドウの閉じるボタンのスタイルを設定するCSSクラスです。

  • data-dismiss="modal"、カスタムのHTML5 data属性。ここでは、モーダルウィンドウを閉じるために使用されます。

  • class="modal-body"、Bootstrap CSSのCSSクラスで、モーダルウィンドウの本体のスタイルを設定します。

  • class="modal-footer"、Bootstrap CSSのCSSクラスで、モーダルウィンドウの下部のスタイルを設定します。

  • data-toggle="modal"、HTML5 カスタムのdata属性data-toggleを使用してモーダルウィンドウを開きます。

オプション

モーダルウィンドウ（Modal Window）の外観と感覚をカスタマイズするためのオプションがあります。これらのオプションは、data属性またはJavaScriptを通じて渡されます。以下のテーブルにこれらのオプションが示されています：

オプション名タイプ/デフォルト値Data 属性名称説明
backdropbooleanまたはstring 'static'
デフォルト値：true		data-backdropユーザーがモーダルボックスの外をクリックしたときにモーダルボックスを閉じない静的な背景を指定します。
keyboardboolean
デフォルト値：true		data-keyboardEscapeキーを押下したときにモーダルボックスを閉じます。falseに設定すると、キーは無効になります。
showboolean
デフォルト値：true		data-show初期化時にモーダルボックスを表示します。
remotepath
デフォルト値：false		data-remotejQueryを使用して .load メソッド、モーダルボックスの主体に内容を挿入します。有効なURLのhrefが追加された場合、その内容を読み込みます。以下の例を参照してください：
<a　data-toggle="modal"　href="remote.html"　data-target="#modal">クリックしてください</a>

メソッド

以下は、modal()と一緒に使用できる便利なメソッドの一例です。

メソッド説明例
オプション: .modal(options)内容をモーダルボックスとしてアクティブにします。オプションオブジェクトをオプションとして受け入れます。
$('#identifier').modal({
keyboard:　false
}
Toggle: .modal('toggle')手動でモーダルボックスを切り替えます。
$('#identifier').modal('toggle')
Show: .modal('show')手動でモーダルボックスを表示にします。
$('#identifier').modal('show')
Hide: .modal('hide')手動でモーダルボックスを非表示にします。
$('#identifier').modal('hide')

オンラインサンプル

以下の例では、メソッドの使用方法を示します：

オンラインサンプル

!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>
<!--　ボタンでモーダルをトリガー　-->
<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>
テストを見てみる ‹/›

以下の結果が表示されます：

ESCキーを押すだけで、モーダルウィンドウが閉じられます。

イベント

以下のテーブルには、モーダルに使用するイベントが列挙されています。これらのイベントは、関数内でフックとして使用できます。

イベント説明例
show.bs.modalshow メソッドが呼び出された後にトリガーされます。
$('#identifier').on('show.bs.modal', function () {
　　//　アクションを実行する...
}
shown.bs.modalモーダルがユーザーに見えるときにトリガーされます（CSSのトランジション効果が完了を待ちます）。
$('#identifier').on('shown.bs.modal', function () {
　　//　アクションを実行する...
}
hide.bs.modalhide 示例方法が呼び出されたときにトリガーされます。
$('#identifier').on('hide.bs.modal', function () {
　　//　アクションを実行する...
}
hidden.bs.modalモーダルがユーザーに対して完全に非表示になったときにトリガーされます。
$('#identifier').on('hidden.bs.modal', function () {
　　//　アクションを実行する...
}

オンラインサンプル

以下の例では、イベントの使用法を示します：

以下の結果が表示されます：

上の例のように、あなたがクリックした場合、以下の結果が表示されます： 閉じる ボタン、つまり hide イベントが発生すると、警告メッセージが表示されます。

Bootstrap ドロップダウンメニュープラグインBootstrap トランジション効果プラグイン