モーダルウィンドウを実装してみよう

kokoe

2014.12.22

フロントエンジニア

※2015.1.26 誤字脱字、説明を修正いたしました。

最近モーダルウィンドウ（ポップアップウィンドウ？）の実装ばっかりやっているココエです。頭の中が常にモーダルです困りました。
なので、モーダルウィンドウの実装について書いていきたいと思います。

モーダルウィンドウなんてライブラリ使えばいいじゃん？

ごもっともです！！！！！！

ごもっともなのですが、ライブラリを使っていると･･･

容量がやたら重かったり･･･
PCとスマホ両方の対応がされていなかったり･･･
ライブラリをカスタマイズしなければいけない機能がでてきたけど、使い方はさておき、修正なんて出来ないよ･･･

なんてことが・・・ありませんか？

・・・あれ？・・ない？（汗

じゃあ、じゃあ･･･
モーダルウィンドウの実装が、自前でできちゃったりすると、ちょっと便利だよね？

なんて思ったことはどうでしょう？

きっと、そんなニーズがあると信じて･･･信じて！
モーダルウィンドウの実装方法について、書きつらねていきたいと思いますｗ

目次
補足
基本形

基本形
応用編-Step1（後日公開予定）
- スクロールしている場合は、表示中のウィンドウの位置にモーダルウィンドウが表示されるようにする。
- ページ内に、モーダルを表示するためのトリガを複数設定する。
応用編-Step2（後日公開予定）
- モーダルウィンドウの高さ（＋上下余白値＋スクロールY値）が、ドキュメントの高さを超えた場合の処理。
- ページ内に、複数のトリガを設定し、トリガの内容に応じたモーダルウィンドウを表示する。
応用編-Step3（後日公開予定）
- モーダルウィンドウ下のレイヤーをクリックしたら、モーダルウィンドウを閉じる。
- フェードインで表示、フェードアウト閉じる。
応用編-Step4（後日公開予定）
- モーダルウィンドウ内に、テンプレートを使って表示したい。（一部だけ動的に書き換えてほしい）
- モーダルウィンドウを閉じずに、モーダルウィンドウ内のコンテンツを変える。

補足

ソースは https://github.com/kokoe/modal/ こちらにあげております。
対象ブラウザは、PC:IE9以降、スマホiOS5, Android4以降を対象としています。
・・・が、テストしきれていない部分もありますため、動作保障はいたしかねます。動作不良がありましたら何卒ご容赦を。。ソースはあくまで実装方法の参考として見ていただければと思います。

基本形

まず最初に、今回の「基本形」を実装した完成形をお見せします。
モーダルウィンドウ基本形　デモ

基本的なモーダルウィンドウの機能（画面内に表示して、「閉じる」を押したら閉じる）は、実装できているのではないかと思います。
スタイル・デザインはまったく入っていませんが、逆に言うと、自分でスタイルをいれてあげれば、好きなようにデザインが適用できちゃいますよ～。

HTML/CSSの準備

まず、基本となるHTML/CSSを準備しましょう。

HTML

以下のようなHTMLを用意します。
https://github.com/kokoe/modal/blob/master/src/base/index.html

[sourcecode lang="html"]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Modal Window</title>
<!-- スマートフォンサイトなら、この記述をいれましょう -->
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<!-- reset.css -->
<link rel="stylesheet" type="text/css" href="//yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<!-- モーダルウィンドウを実装する際の基本CSS -->
<link rel="stylesheet" type="text/css" href="../css/modal.css">
</head>
<body>
    <div id="wrap">

        <!-- #contents内に、ページのコーディングをしていきます -->
        <div id="contents">
            <h1>モーダルウィンドウ</h1>
            <p>基本形</p>
            <br>
            <a id="openModal" href="javascript:void(0)">クリックするとモーダルが開くよ</a>
        </div>

        <!--
             #contentsの同階層に、モーダルウィンドウの記述をしていきます
             .modalBaseLayer -> モーダルウィンドウ下の黒いレイヤー層
             .modal -> モーダルウィンドウ
        -->
        <div id="modalBaseLayer" class="modalBaseLayer">
            <div id="modal" class="modal">
                モーダルウィンドウが開きましたね。
                <a href="javascript:void(0)" id="closeModal">閉じる</a>
            </div>
        <!-- /#modalBaseLayer --></div>

    <!-- /#wrap --></div>

    <script src="./modal.js"></script>

</body>
</html>
[/sourcecode]

[sourcecode lang="html"]

<!DOCTYPE html>

<head>

<title>Modal Window</title>

</head>

<body>

<h1>モーダルウィンドウ</h1>

<br>

<a id="openModal" href="javascript:void(0)">クリックするとモーダルが開くよ</a>

</div>

<!--

#contentsの同階層に、モーダルウィンドウの記述をしていきます

.modalBaseLayer -> モーダルウィンドウ下の黒いレイヤー層

.modal -> モーダルウィンドウ

-->

モーダルウィンドウが開きましたね。

</div>

</div>

</div>

</body>

</html>

[/sourcecode]

※reset.cssは、上記の例ではyuiさんのを使用させていただいておりますが、ご自身のお好みのreset.cssを指定ください。
※modal.cssのファイルパスは、後述するmodal.cssのファイルの保存場所を指定してください。

以下のような構造になれば、上記の通りでなくてもOKです。
※この構造を変えると正しく動きませんので、ご注意ください。（後述するスタイルの設定に関連するため。）

html
 ├ head
 └ body
   └ #wrap
     ├ #contents                      - ページコーディング部分 
     └ #modalBaseLayer.modalBaseLayer - モーダルウィンドウ・ベースレイヤ
       └ #modal.modal                 - モーダルウィンドウ

html

├ head

└ body

└ #wrap

├ #contents - ページコーディング部分

└ #modalBaseLayer.modalBaseLayer - モーダルウィンドウ・ベースレイヤ

└ #modal.modal - モーダルウィンドウ

なお、応用編以降では、モーダルウィンドウの数が増えます。

そのため、エレメント選択をIDからクラスに変えるものも発生する予定です。（上記ではIDで指定）
また、モーダルウィンドウが増えた場合は、以下のような構造になる予定です。

html
 ├ head
 └ body
   └ #wrap
     ├ #contents                       - ページコーディング部分 
     ├ #modalBaseLayer1.modalBaseLayer - モーダルウィンドウ1・ベースレイヤ
       └ .modal                        - モーダルウィンドウ1
     └ #modalBaseLayer2.modalBaseLayer - モーダルウィンドウ2・ベースレイヤ
       └ .modal                        - モーダルウィンドウ2

html

├ head

└ body

└ #wrap

├ #contents - ページコーディング部分

├ #modalBaseLayer1.modalBaseLayer - モーダルウィンドウ1・ベースレイヤ

└ .modal - モーダルウィンドウ1

└ #modalBaseLayer2.modalBaseLayer - モーダルウィンドウ2・ベースレイヤ

└ .modal - モーダルウィンドウ2

CSS

以下のCSSを用意します。（記述が面倒な方はダウンロードしちゃいましょう。）
https://github.com/kokoe/modal/blob/master/src/css/modal.css

CSSのPoint

html, body {height: 100%} #wrap {min-height: 100%}

画面（というかドキュメント）いっぱいに、モーダルウィンドウのベースレイヤを配置するためにはどうしたらよいでしょう？

Javascriptでドキュメントの幅・高さを取得して、モーダルウィンドウのベースレイヤにstyle属性でwidth, height値をセットして・・・
なんてことはする必要ありません。

html, body要素に対して、height: 100%を設定。
body直下の#wrapに対して、min-height: 100%を設定。
#wrap直下のモーダルウィンドウのベースレイヤ（.modalBaseLayer）に、position:absolute, top:0, left:0, right:0, bottom:0 を指定

これだけで、ドキュメントの幅・高さピッタリにモーダルウィンドウのベースレイヤが配置できるのです。

.modalBaseLayer {visibility: hidden;}

モーダルウィンドウは、大概の場合ページロード時に非表示にしておくケースが多いです。
そのため、CSSでベースレイヤーを非表示にしておく必要がありますが、その際利用するCSSプロパティと値は、visibility: hiddenを使います。
一見、display:noneとしそうですが、.modalBaseLayerにposition:absoluteを指定しているからこそ、visibilityプロパティを使用するとよいです。

では、visibilityプロパティを利用すると、何がうれしいか？･･･というと
visibility: hiddenで、該当の要素が表示されていなくても、Javascriptで高さを取得することが出来ます。
※display:noneが指定されている要素は、Javascriptで高さが取得できないのです。（0が返ってきます）

モーダルウィンドウの実装は、モーダルウィンドウの高さを取得して、表示位置を決めたり、ドキュメントサイズの調整をしたり、という作業が発生するため、非表示でも高さが取得できるということは重要なメリットになります。