Webサイトを制作していると、よく使用するモーダルウィンドウ（ポップアップウィンドウ）を超簡単にコピペで実装できるコードをご紹介致します！
機能面では、iOS対応の背景固定や、コンテンツ量が多い場合のスクロールにも対応しているので様々な場面で活用頂けるかと思います。今回はHTML・CSS・jQueryを使用して作成致しました。
モーダルウィンドウのサンプルを見てみよう
See the Pen
モーダルウィンドウ by kouki kuroda (@kouki0611)
on CodePen.
今回作成する、モーダルウィンドウのサンプルになります。
良く見かけるものだと思いますが、他のモーダルウィンドウと違う箇所はクローズボタンの位置が特徴的かなと思います。通常のクローズボタンは、右上などに配置されていることが多いですが、スマートフォンにて片手で操作できることを想定し、片手でも指が届きやすい真ん中下部に配置しております！
jQueryを読み込む
今回jQueryを使用するのでこちらから予め読み込んでおきましょう。
jQuery 3.xのminifiedをクリックするとコードが表示されますので、コピーしましょう。貼り付ける位置は、</body>の直前で大丈夫です！
読み込む際に、実際のjQueryのコードはjQueryライブラリの読み込みより後ろに記述（外部ファイルなら読み込み）するようにしましょう！
モーダルウインドウ ー HTMLサンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<button id="modal__btn" class="modal__opner"> モーダルを開く </button> <div id="modal"> <div class="modal__inner"> <h1>モーダルウィンドウ</h1> <p>モーダルウィンドウが開いています。モーダルウィンドウが開いています。モーダルウィンドウが開いています。モーダルウィンドウが開いています。モーダルウィンドウが開いています。モーダルウィンドウが開いています。モーダルウィンドウが開いています。モーダルウィンドウが開いています。モーダルウィンドウが開いています。モーダルウィンドウが開いています。モーダルウィンドウが開いています。モーダルウィンドウが開いています。</p> </div> <div id="close__btn" class="modal__closer">✕</div> </div> <div id="overlay" class="modal__closer"></div> |
1〜3行目
モーダルを開くためのボタンとなります。
6〜9行目
こちらがモーダルウィンドウになりますので、コンテンツはこちらに追加していきましょう！
10行目
モーダルウィンドウが開くと、表示されるクローズボタンとなっています。
13行目
オーバーレイとなり、モーダルウィンドウの黒の背景の部分となります。こちらをクリックしてもウインドウは閉じる仕様となっております。
モーダルウインドウ ー CSSサンプルコード
基本的にはクラス・ID名を見て頂ければ理解頂けるかと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
body { height: 5000px; } body.fixed { position: fixed; width: 100%; height: 100%; left: 0; } /* ボタンスタイリング */ #modal__btn { border-radius: 5px; border: none; box-shadow: 0 0 20px #3facb3; background: #3facb3; color: #fafafa; cursor: pointer; text-align: center; line-height: 65px; height: 65px; width: 350px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #modal__btn:hover { opacity: .8; } /* モーダル関係スタイリング */ #modal { background: #fff; display: none; padding: 20px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 50vh; /*好きなサイズに変更*/ width: 80%; /*好きなサイズに変更*/ z-index: 1; } .modal__inner { height: 100%; overflow: scroll; } #close__btn { background: #fff; border-radius: 50%; cursor: pointer; position: absolute; bottom: -20px; left: 50%; transform: translate(-50%, 100%); text-align: center; line-height: 40px; height: 40px; width: 40px; } #close__btn:hover { opacity: .8; } #overlay { background: rgba(0,0,0,.7); display: none; cursor: pointer; position: fixed; top: 0; left: 0; height: 100%; width: 100%; } /********************** ここからはお好みで **********************/ h1 { border-bottom: 2px solid #333; padding-bottom: 10px; } p { line-height: 1.7; font-size: 14px; } |
36行目
display: none;にて初期状態は非表示にしております。jQueryを使うことによって、display: block;にしたりdisplay: none;にしたりと変更していきます。
42、43行目
モーダルウィンドウの横幅と高さを、こちらで指定しています。作成するページや使用用途に応じてこちらを変更しましょう。
モーダルウインドウ ー jQueryサンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function () { $('#modal__btn').click(function(){ $('#modal, #overlay').fadeIn(); scrollPosition = $(window).scrollTop(); $('body').addClass('fixed').css({'top': -scrollPosition}); }) $('#overlay , #close__btn').click(function(){ $('#modal, #overlay').fadeOut(); $('body').removeClass('fixed').css({'top': 0}); window.scrollTo( 0 , scrollPosition ); }) }); |
2〜6行目
モーダルウィンドウを開いた際の処理が記述されています。開くボタン（#modal__btn）をクリックすると、モーダルウィンドウ（#modal）とオーバーレイ（#overlay）がフェードインします。その際にスクロール量を取得しbodyに付与しています。こちらの動作に関しましては下記記事を参考にさせて頂いております！
| 参考：モーダルウインドウの背景を上下にスクロールせず固定する方法 | imasashi.net |
8〜12行目
そして背景のオーバーレイ（#overlay）もしくは、✕ボタン（#close__btn）をクリックするとモーダルウィンドウ（#modal）がフェードアウトするといった作りになっております！
モーダルウィンドウのコードサンプルまとめ
今回は超簡単にモーダルウィンドウを実装する方法をご紹介致しました！皆さんうまくいきましたでしょうか？jQueryのコードもシンプルなので、jQuery初心者の方は練習などにも一度実装してみてはいかがでしょうか？
お読み頂きありがとうございました！
