Bootstrap 3でModal(モーダルダイアログ)機能を試して見る

2013年12月30日 19時21分

201312301921HCSW00.png

はじめに

Bootstrap 3を試してみるシリーズの第８弾は、モーダルダイアログの表示を行うModalsを試してみます。

前提条件

作業の前提条件は、下記のとおりです。

ソフトウエアバージョン
OSWindows 7 Ultimate 32bit
CygwinSetup Version 2.831

Modalsの使用方法

お約束のbootstrap.min.[cs,js] + jquery-1.10.2.min.jsを 指定して、HTMLを作成します。

  1. ボタン作成

    モーダルダイアログは、ボタンをクリックすると表示されるため、呼び出し元のボタンを作成します。
    作成時に指定する属性は、下記のとおりです。

    属性概要
    data-togglemodalを指定します。
    data-targetボタンに紐付くダイアログのIDを指定します。
     
    <button class="btn btn-primary btn-sm"
  data-toggle="modal"
  data-target="#modal1"
  >View Source
</button>
  2. ダイアログの定義

    modalクラスを使用して、ダイアログを定義します。定義の際には、先に作成したIDを指定する必要があります。 

    <div id="modal1" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      </div><!-- modal-header -->
      <div class="modal-body">
      </div><!-- model-body -->
      <div class="modal-footer">
      </div><!-- model-footer -->
    </div><!-- modal-content -->
  </div><!-- modal-dialog -->
</div><!-- modal -->
  3. モーダルダイアログの作成

    モーダルダイアログは、以下の4つのクラスから構成されます。

    クラス名概要
    modal-contentmode-header/model-body/modal-footerから構成されます。
    modal-headerダイアログのヘッダーやボタンを定義します。
    modal-bodyダイアログに表示するコンテンツを定義します。
    modal-footerダイアログのフッターやボタンを定義します。
  4. modal-headerの作成

    ダイアログに表示するボタンやダイアログのタイトルを作成します。 

    <div class="modal-header">
  <button type="button" class="close"
    data-dismiss="modal" aria-hidden="true">&times;
  </button>
  <h4 class="modal-title">Modal Dialog</h4>
</div>
  5. modal-bodyの作成

    ダイアログに表示するコンテンツを作成します。 

    <div class="modal-body">
  <pre class="brush:html;" title="View Source">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link href=&quot;bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
  </pre>
</div>
  6. modal-footerの作成

    フッターの作成は、必須ではありませんが、フッターにクローズボタンを配置することで、ダイアログをクローズボタンで閉じることができます。 

    <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!-- modal-footer -->

    サンプルでは、とダイアログ表示の比較を行っています。

    030.html 
    <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>030</title>

    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="syntaxhighlighter/styles/shCore.css" rel="stylesheet">
    <link href="syntaxhighlighter/styles/shThemeEmacs.css" rel="stylesheet">
    <style>
      body { margin-top: 80px; }
    </style>
  </head>

  <body>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header"></div>
        <div class="navbar-collapse collapse"></div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3"></div>

        <!-- メインコンテンツ -->
        <div class="col-xs-6 col-sm-6 col-md-6">
          <div class="container-fluid">

            <h4>Syntax Highlighter</h4>

            <pre class="brush:html; collapse:true;" title="View Source">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link href=&quot;bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;syntaxhighlighter/styles/shThemeEmacs.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
            </pre>

            <h4>Modal Dialog</h4>

            <button class="btn btn-primary btn-sm"
              data-toggle="modal" data-target="#modal1">View Source
            </button>

            <div id="modal1" class="modal fade">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close"
                      data-dismiss="modal" aria-hidden="true">&times;
                    </button>
                    <h4 class="modal-title">Modal Dialog</h4>
                  </div>
                  <div class="modal-body">
                    <pre class="brush:html;" title="View Source">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link href=&quot;bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
                    </pre>
                  </div><!-- model-body -->
                </div><!-- modal-content -->
              </div><!-- modal-dialog -->
            </div><!-- modal -->

            <h4>Modal Dialog with Close</h4>

            <button class="btn btn-primary btn-sm"
              data-toggle="modal" data-target="#modal2">View Source
            </button>

            <div id="modal2" class="modal fade">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close"
                      data-dismiss="modal" aria-hidden="true">&times;
                    </button>
                    <h4 class="modal-title">Modal Dialog</h4>
                  </div>
                  <div class="modal-body">
                    <pre class="brush:html;" title="View Source">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link href=&quot;bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
                    </pre>
                  </div><!-- model-body -->
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div><!-- modal-footer -->
                </div><!-- modal-content -->
              </div><!-- modal-dialog -->
            </div><!-- modal -->

          </div><!-- container-fluid -->
        </div><!-- col-6 -->

        <div class="col-xs-3 col-sm-3 col-md-3"></div>
      </div><!-- row -->
    </div><!-- container -->

    <script src="jquery-1.10.2.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="syntaxhighlighter/scripts/shCore.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushAppleScript.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushAS3.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushBash.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushColdFusion.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushCpp.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushCSharp.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushCss.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushDelphi.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushDiff.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushErlang.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushGroovy.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushJava.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushJavaFX.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushPerl.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushPhp.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushPlain.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushPowerShell.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushPython.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushRuby.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushSass.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushScala.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushSql.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushVb.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushXml.js"></script>
    <script type='text/javascript'>SyntaxHighlighter.all();</script>
  </body>
</html>
    201312301921HCSW01.png
    201312301921HCSW02.png
    デモは、030.htmlからご覧頂けます。
    ファイルは、030.zipからダウンロードできます。

▲