【Bootstrap】モーダルウィンドウ作成|コピペ可能

  • このエントリーをはてなブックマークに追加

Bootstrapを使用すると、CssやJavaScriptを利用しなくても簡単にモーダルウィンドウを作成することができます。今回は、Bootstrapを利用したモーダルウインドウの作成方法を、サンプルコードを提示しながら説明します。

  1. モーダルウインドウとは
  2. Bootstrapを利用せずにモーダルウィンドウを作成
  3. Bootstrapを利用してモーダルウィンドウを作成

 1. モーダルウインドウとは

モーダルウィンドウとは、ウィンドウ内で表示された操作を完了するまで(またはキャンセルするまで)他の操作をさせないようにするウィンドウのことです。
主にユーザーに重要な操作や確認を促したい時に利用されます。

 2. Bootstrapを利用せずにモーダルウィンドウを作成

Bootstrapを利用せずに、CssとJavaScript(jQuery)のみでモーダルウィンドウを作成することもできます。下記のページで、モーダルの作成方法をサンプルコードを提示しながら説明しています。

 3. Bootstrapを利用してモーダルウィンドウを作成

Bootstrapを利用した基本的なモーダルウインドウの作成方法を、サンプルコードを提示しながら説明します。

【Bootstrap】モーダルを開くボタン(data属性)

data-toggle=”modal” Bootstrapにモーダルを起動することを伝える
data-target=”#ターゲットのモーダルId” Bootstrapに起動したい要素を伝える(起動させたいモーダルのIdを指定)

【Bootstrap】class

.modal モーダルウィンドウを構成
.modal-dialog モーダルウィンドウを構成。.modal-sm、.modal-lg、.modal-xlを付けることで、モーダルのサイズを指定することができる
.modal-content モーダルウィンドウ全体
.modal-header タイトルを書くヘッダー部分
.modal-title タイトル
.modal-body 詳細な内容を書くボディ部分
.modal-footer 主にボタンが置かれるフッター部分

【Bootstrap】data-dismiss=”modal”

data-dismiss=”modal”をボタンに付けることで、モーダルを閉じるボタンにすることができます。

【Bootstrap】aria-hidden=”true”

BootstrapでもWebアイコンの指定方法です。WAI-ARIAの仕様で定義されており、trueを指定することで、その要素を読み上げないようにすることができます。

●Html

Bootstrapを利用して作成したモーダルは、以下のようになります。テーブル内の削除ボタンでモーダルを開き、キャンセルボタンと×ボタン、背景クリックでモーダルを閉じることができます。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*