モーダルウィンドウ(modal window)を設置する方法

モーダルウィンドウ(modal window)を設置する方法

モーダルウィンドウ(modal window)を設置する方法

モーダルウィンドウ(modal window)を実装する方法をご紹介しています。

javascriptによるモーダルウィンドウはオリジナルjsやJqueryを使ったものがあります。

CSSのみで実装する場合はウィンドウボックスにid属性を付け、指定された属性の:targetのスタイルでコントロールします。

モーダルウィンドウ(modal window)を付ける

本記事では、モーダルウィンドウ(modal window)を付ける方法をご紹介します。

その画面に注目してしてもらう場合や、スマホメニュー等によく使われます。

モーダルウィンドウを設置する目的

モーダルウィンドウは、画面背景を黒くするなどして操作を部分的に制限する場合が多いです。

注目させたいウィンドウ部分以外は、暗く敷き詰めてグレー背景にします。

リンクや注意事項などをそのウィンドウ内で表現する訳です。

javascriptを使った場合や、CSSのみで実装する方法、実際のスマホメニューサンプルなどをご紹介します。

サンプルに関する注意

今回モーダルウィンドウのサンプルは全て記事内に設置をしています。

サンプルによっては記事枠内のみをグレー背景覆う(表示される)ものや、ページ自体を覆うものもあります。

ボタンを押す事で強制的にスクロールされる場合もありますので、ご注意ください。

javascriptを使ったmodal window

本サンプルはjavascriptを使ったモーダルウィンドウが表示されます。

ウィンドウの中に表示する文字やHTMLは、jsファイルの中に書き込んで制御します。

そのためページソース上ではボタンしか設置をしません。

特別な警告や注意事項などを表示する際、簡単に使えるサンプルではないでしょうか。

モーダルウィンドウ構成要素

HTMLソース

<button id="modal-window">ボタンを押すとモーダルウィンドウが表示されます</button>

この様にボタン部分のみです。

CSS

特にコントロールする必要のあるCSSはありませんので、ボタンをデザインするなど自由です。

JS

modal.js
app.js

上記のJSファイルをページフッター部分で2つ読み込みましょう。

モーダルウィンドウを表現するmodal.jsとウィンドウ内のコンテンツを表現するapp.jpです。

・modal.js…モーダルウィンドウ構築用
・app.js…ウィンドウ内コンテンツ構築用

ウィンドウ内コンテンツについて

app.jsの中に文章やHTMLソースを入れて、ウィンドウ内コンテンツを作ります。

app.jsソース

'use strict'; (function() { var btn = document.getElementById('modal-window'); btn.addEventListener('click', openModalWindow); function openModalWindow(e) { var child = document.createElement('div'); child.className = "inside"; var text = document.createElement('h1'); text.className = "inside-text"; text.innerHTML = "<a href='#'>ここにHTMLソースが入る</a>"; child.appendChild(text); //create modal instance and pass in child elements //can be whatever, styled however you want var modal = new Modal(child, true); modal.show(); //open the modal window } })();

タグを入れる場合は上記の様に、ダブルコーテーション「"」をシングルコーテーション「'」に変更しましょう。

サンプル例

×ボタンでのみ解除

上記ボタンをクリックすると、ページ全体がグレーで覆われたモーダルウィンドウが表示されます。

このサンプルではウィンドウ内の×マークを押さないとモーダルウィンドウが解除されない仕様です。

このような強制を掛ける事でウィンドウに集中してもらう訳ですね。

CSSのみで作るmodal window

次はCSSとHTMLのみでjavascriptを使わずに表現する方法です。

javascriptを使わずに表現しているので簡単であり、他のjsファイルとバッティングする事もないので実装も容易です。

表示するウィンドウ内のコンテンツも全て、直接HTMLソースに記述します。

モーダルウィンドウ構成要素

HTMLソース

<div class="row"> <div class="col-sm-12"> <a href="#modal1" class="button">モーダルウィンドウ1</a> <a href="#modal2" class="button">モーダルウィンドウ2</a> <a href="#modal3" class="button">モーダルウィンドウ13</a> </div> </div> <div id="modal1" class="overlays"> <a class="cancel" href="#"></a> <div class="modals"> <h2>モーダルウィンドウ1</h2> <div class="cont"> <p>×マークでも背景クリックでも解除できます。</p> <p class="close"><a href="#">×</a></p> </div> </div> </div> <div id="modal2" class="overlays"> <a class="cancel" href="#"></a> <div class="modals"> <h2>モーダルウィンドウ2</h2> <div class="cont"> <p>背景クリックで解除ができます。</p> </div> </div> </div> <div id="modal3" class="overlays"> <div class="modals"> <h2>モーダルウィンドウ3</h2> <div class="cont"> <p>×ボタンのみで解除できます。</p> <p class="close"><a href="#">×</a></p> </div> </div> </div>

ボタンにはリンクidが設定され、対応するid属性のついたボックス要素がそれぞれ用意されています。

各ボックス要素の中にウィンドウ表示コンテンツが格納されていますね。

CSS

.overlays { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); transition: opacity 200ms; visibility: hidden; opacity: 0; } .overlays .cancel { position: absolute; width: 100%; height: 100%; cursor: default; } .overlays:target { visibility: visible; opacity: 1; } .modals { margin: 0px auto; padding: 20px; background: #fff; border: 1px solid #666; width: 400px; border-radius:6px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); position: relative; } .modals h2 { margin-top: 0; } .modals .close { position: absolute; width: 20px; height: 20px; top: 20px; right: 20px; opacity: 0.8; transition: all 200ms; font-size: 24px; font-weight: bold; text-decoration: none; color: #777; } .modals .close:hover { opacity: 1; } .modals .cont { max-width: 400px; overflow: auto; } .modals p { margin: 0 0 1em; text-align: center; } .modals p:last-child { margin: 0; } a.button { background-color:#fff; box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); cursor:pointer; display:block; font-weight:300; height:50px; padding:15px; text-align:center; border-radius:6px; margin:40px auto; max-width:200px; opacity:1; color:#333; text-decoration:none; transition:0.3s box-shadow ease; -webkit-transition:0.3s box-shadow ease; transform: translateY(0px); text-shadow: 0 0 0; } a.button:hover { box-shadow:0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19); }

CSSの解説

表示・非表示を切り替えるoverlayクラス(グレー背景)を設定し、表示コンテンツ部分をmodalクラスでデザインします。

modalボックスはoverlayクラスにより元々見えないのですが、:targetになった時にvisibility: visible;で見える様になります。

その際、opacityが0から1へと「transition: opacity 200ms;」で滑らかに表示されます。

.cancelは.overlayの上に重なっている

cancelクラスのボックスは、絶対配置でoverlayの上に重なっているので、背景をクリックする事ができます。

cancelクラスが無ければ背景を押して解除する事ができなくなる訳です。

.modalや×ボタンのスタイルは自由です。

サンプル例

本サンプルでは枠内でモーダルウィンドウを表示させるため、外枠を.modal_wrap(position: relative;)で囲っています。

これを外すと、その時点でrelativeになっている親要素に対してモーダルウィンドウが表示されます。

モーダルウィンドウの発現・解除について

本サンプルではモーダルウィンドウの発現・解除に、id属性のリンクを使っています。

リンクでボックスに設定されたid属性(#modal1など)を指定すると、指定されたoverlayボックスが:targetのスタイル対象となります。

:targetの適用中は、overlayクラス内にあるmodalクラスのウィンドウスタイルも表示されます。

逆にmodal1・modal2・modal3のいずれでもないid先に飛ぶと、overlayボックスの:targetが外れるのでボックス自体が非表示になります。

この:targetのON・OFFにより、モーダルウィンドウが表示・非表示になる訳です。

3つのサンプルの違い

1番目はどちらからでも解除できます。
2番目はウィンドウ内に×ボタンがありません。
3番目はグレー背景クリックによる解除が効きません。

スマホ版メニューをmodal windowで実装する

では最後に実際のスマホ版メニューで使われるようなモーダルウィンドウのサンプルをご紹介します。

本サンプルの利用用途

現在はPCスマホ版一体型レスポンシブルデザインが主流ですよね。

ですので一つのナビゲーションメニューをPCでもスマホでも使える様に流用するのが一般的です。

しかしまだまだPCページとスマホページとを別々に持っている構造のWEBサイトはたくさんあります。

スマホ版ページではこのサンプルがそのまま使えるのではないでしょうか。

モーダルウィンドウ構成要素

HTMLソース

Jqueryとjavascriptコードがここに入る
<div class="spHoverMenu"><a href="#" class="spHoverMenuBtn"><span>メニュー</span></a></div> <div class="spMenuBackground" style="display:none;"> </div> <div class="spHoverMenuCloseBtnArea"> <a class="spHoverMenuCloseBtn" href="#"><span>閉じる ×</span></a> </div> <div class="spMenuTapDisp" style="display:none;"> <div class="spHoverMenuTitle"><span>ページメニュー</span></div> <ul> <li><a href="index.html"><div>HOME</div></a></li> <li><a href="css_modal_window.html"><div>モーダルウィンドウ</div></a></li> 以下メニュー項目… </ul> <div class="spHoverMenuCloseBtnCenter"> <a class="spHoverMenuCloseBtn" href="#"><span>閉じる ×</span></a> </div> </div>

CSS

sp_base.css

実装時の環境に合わせて自由に変更してください。必須のところなどはありません。

JS

Jquery
<script src="../js/jquery-1.12.4.min.js"></script>
Javascriptコード
<script type="text/javascript"> //<![CDATA[ (function(){var container=$("script:last").parents("div:first");$(function(){$(container).find(".spHoverMenuBtn").click(function(){$(container).find(".spMenuBackground").addClass("spMenuBackgroundStyle");$(container).find(".spMenuBackground").fadeIn("normal");$(container).find(".spMenuTapDisp").addClass("spMenuTapDispOpen");$(container).find(".spMenuTapDisp").fadeIn("normal");$(container).find(".spHoverMenuCloseBtn").fadeIn("normal");$(container).find(".spHoverMenuCloseBtnArea").fadeIn("normal");$(container).find(".spMenuBackground").height(document.body.scrollHeight+15);});$(container).find(".spMenuBackground").click(function(){$(container).find(".spMenuTapDisp").fadeOut("normal");$(container).find(".spHoverMenuCloseBtn").fadeOut("normal");$(container).find(".spHoverMenuCloseBtnArea").fadeOut("normal");$(container).find(".spMenuBackground").fadeOut("normal");});$(container).find(".spHoverMenuCloseBtn").click(function(){$(container).find(".spMenuTapDisp").fadeOut("normal");$(container).find(".spHoverMenuCloseBtn").fadeOut("normal");$(container).find(".spHoverMenuCloseBtnArea").fadeOut("normal");$(container).find(".spMenuBackground").fadeOut("normal");});$(container).find(".spHoverMenuCloseBtnArea").click(function(){$(container).find(".spMenuTapDisp").fadeOut("normal");$(container).find(".spHoverMenuCloseBtn").fadeOut("normal");$(container).find(".spHoverMenuCloseBtnArea").fadeOut("normal");$(container).find(".spMenuBackground").fadeOut("normal");});});})(); //]]> </script>

まずJSファイルは、jqueryの読み込みが必要です。

手元にある実物を読み込むか、CDNできるURLから読み込んでもOKです。

それとは別に直接HTMLソース上にJSコードを入れています(別ファイルに分けても構いません)。

いずれもナビゲーションメニューの前に入れるようにしましょう(ナビゲーションタグの後では動きません)。

サンプル例

メニューをクリックするとモーダルウィンドウが広がり、メニューが表示されます。

メニューはタイトルや項目は自在に入れる事ができます。

閉じるボタンによるモーダルウィンドウ解除は右上やメニュー下、グレー背景部分のいずれも有効です。

メニューを並べて右上に「メニュー」ボタンを付ける様にすれば、すぐに実装できますね。

この記事をシェアする

人気記事

CSS関連記事