このページの本文へ

Bootstrapでモーダルウィンドウとスクロールスパイを実装

2014年10月28日 11時00分更新

イシジマミキ/ザ・マーズナレッジ代表

  • この記事をはてなブックマークに追加
本文印刷

 最近よく見かけるシングルページを作るデザイン塾。前回、インブラウザーデザインでシングルページを仕上げました。

single-06-01.png
完成したシングルページ「PROBONO PAPRIKA」

 今回は、完成し たシングルページに、よく見かけるインターフェイス、モーダルウィンドウとスクロールスパイを実装する方法を紹介します。どちらもJavaScriptで書かれていますが、Bootstrapに用意されているサンプルを使って簡単に実装できます。

single-06-02.png
BootstrapのJavaScriptサイト

便利なモーダルウィンドウ

 モーダルウィンドウとは、ユーザーの操作をウィンドウ内に制限する(モードが固定された)操作方式のことです。必須の操作を省略させたくないなど、よく使われているインターフェイスです。

 BootstrapのJavaScriptサンプルの右側にある[Modal]→[Examples]から、「Live demo」を表示します。

single-06-03.png
右側の[Modal]→[Examples]を選んで表示した「Live demo」

 「Live demo」の[Launch demo modal]をクリックするとモーダルウィンドウが表示されます。

single-06-04.png
[Launch demo modal]をクリックして表示されたモーダルウィンドウ

 モーダルウィンドウを、次のような手順で実装しましょう。

  1. ボタンのHTMLをindex.htmlに追加する
  2. Modalのサンプルコードをindex.htmlにコピー&ペーストする

1.ボタンのHTMLをindex.htmlに追加する

 モーダルウィンドウを表示するためのボタンを、index.htmlの「使い方」ブロックの「プロボノしたい人」に追加します。

■元のソースコード(index.htmlの一部)


<section id="howtouse" class="howtouse">
        <div class="worker">
          <div class="target">
            <div class="oval">
              <span>プロボノ<br>したい人</span>
            </div>
            <p>フォームから必要な情報を入力しておくだけ。あとはページを見てくれた人から声がかかるのを気長に待つのみです。</p>
          </div>
        </div>

    中略

      </section>

■変更後ソースコード(index.htmlの一部、赤い部分が追記した箇所)


<section id="howtouse" class="howtouse">
        <div class="worker">
          <div class="target">
            <div class="oval">
              <span>プロボノ<br>したい人</span>
            </div>
            <p>フォームから必要な情報を入力しておくだけ。あとはページを見てくれた人から声がかかるのを気長に待つのみです。</p>
            <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">詳しく見る</a>
          </div>
        </div>

    中略

      </section>

single-06-05.png
モーダルウィンドウを表示するための「詳しく見る」ボタンを追加した「プロボノしたい人」

2.Modalのサンプルコードをindex.htmlにコピー&ペーストする

 モーダルウィンドウ部分をHTMLに追加します。

 BootstrapのJavaScriptサイト右側の[Modal]→[Examples]2つ目の「Live demo」で表示されているソースコードの「<!-- Modal -->」以下の部分をコピーします。

single-06-06.png
赤枠で囲った部分をコピー

 コピーしたコードを、index.htmlの</footer>の下にペーストします。

■変更後ソースコード(index.htmlの一部、赤い部分が追記した箇所)


<footer>
  <div class="copyright text-center">&copy The Mars Knowledge Inc.</div>
  <!-- /.container -->
</footer>
 
<!-- 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

 追加した「詳しく見る」ボタンをクリックして、下記のように表示されれば無事、実装ができています。

single-06-07.png
表示されたモーダルウィンドウ

 作業したことは、ボタンのソースをindex.htmlに追加して、Modalのサンプルコードをindex.htmlにコピー&ペーストしただけです。非常に簡単でしたね。

 ただし、IDが「myModal」では何のことか分かりにくいので、data-targetとmodal自身のIDを分かりやすいもの、例えば「loginModal」や「dialogModal」のように変更しておくとさらに良いでしょう。

 JavaScriptが理解できていなくとも、サンプルコードを貼り付けていくだけで、よく使うインターフェイスが実装できます。

「カスタムデータ属性」を便利に使っているBootstrap

 モーダルウィンドウを表示するためのボタンにある「data-toggle="modal"」「data-target="#myModal"」は、HTML5のカスタムデータ属性を利用しています。

 カスタムデータ属性は、HTMLの仕様であらかじめ定義されている属性以外に、制作者が属性を定義できる機能で、「data-」の後に任意の名前をつけられます。「=”value”」のように「=」をつけ、引用符で値を囲えば値を渡せます。定義したカスタムデータ属性はJavaScriptで取得して操作できます

 先のHTMLでは「toggle」というカスタムデータ属性を定義し、値として「modal」を渡しているのですね。「target」に関しても同様です。それらをbootstrap.js内で値として受け取り、modalの操作をしているんです。

 bootstra.js内でのmodalの操作は、それぞれの属性に定義された値を取得して、処理しています。ここら辺は、理解できなくても大丈夫です。

  1. data-hogehogeはHTML5の「カスタムデータ属性」によって作られているもの
  2. それを使うとJavaScriptで値を取得して利用できる

 この2つだけを覚えておけばOKです。

■bootstra.js内のMODAL DATA-APIソース


// MODAL DATA-API
// ==============

$(document).on('click.bs.modal.data-api''[data-toggle="modal"]'function (e) {
  var $this   = $(this)
  var href    = $this.attr('href')
  var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
  var option  = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())

  if ($this.is('a')) e.preventDefault()

  $target.one('show.bs.modal'function (showEvent) {
    if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
    $target.one('hidden.bs.modal'function () {
      $this.is(':visible') && $this.trigger('focus')
    })
  })
  Plugin.call($target, option, this)
})

}(jQuery);

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く