モーダルウィンドウ(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ソース上では、ボタンしか設置しません。

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

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

HTMLソース

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

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

CSS

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

JS

次に以下2つのJSファイルを、ページフッター部分で読み込みましょう。

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

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

app.jsソース

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

'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を使わないため他の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や×ボタンのスタイルは自由です。

サンプル例

3つのサンプルの違い

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

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

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

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

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

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

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

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

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

スマホ版メニューを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関連記事