【徹底解説】5歳でも分かる、モーダルウィンドウの作り方(jQuery編)

ABOUTこの記事をかいた人

フロントエンドエンジニア。

こんにちは。今回はモーダルウィンドウの作り方を徹底的に解説していきます。

この記事は僕が書いている5歳でも分かるシリーズの1つです。こちらにスライドショーやタブメニューなどの作り方も載っていますのでぜひご覧ください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

「htmlはデータの構造」「cssはその見せ方を作るもの」「jsはクラスの付け替えによってその2つを操作するもの」と言う切り分け方を前提に、jQueryのaddClass/removeClass/toggleClassを用いた方法で実装します。

作るものの確認

今回作るのは、このように右上のボタンを押すと開閉するモーダルウィンドウです。

コードは以下のものになりますので、何か困ったことが起きたらここのコードと見比べてみてください。(コピペでも使えます)

index.html
style.css

実装

準備

コードを書き始める前に、ディレクトリ構成の確認とリセットCSSの導入です。

├── index.html
├── resources
   └── styles
       ├── destyle.css
       └── style.css


上記の形でファイルを配置しましょう。stylesはルートディレクトリ直下でも良いですが、実際にはresourcesの中にimagesフォルダなどと一緒に入っている形が多いのでそのようにしました。

destyle.cssというのがリセットCSSで、詳細な説明は省きますが各種タグに初期で当たっている様々な余計なスタイルを打ち消してくれるものです。

今回はこちら(https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css)のものを利用します。こちらのコードをそのままコピーしてdestyle.cssとして上記の場所に配置します。

destyle.css

見た目を作る

ヘッダーとコンテンツ部分

それでは見た目から作りましょう。ヘッダーとコンテンツ部分を用意していきます。

モーダルウィンドウ部分

続いてモーダルウィンドウとボタンです。

先にモーダルウィンドウから配置して行きます。コンテンツの部分と、背景のグレーの部分です。

モーダルウィンドウの中央揃えが少し珍しい方法を使っています。

positionがabsoluteやfixedの時に使える方法で、top/left/right/bottomを全て0にした上でmarginをautoにすると、中央に配置されます。

横方向のみ、縦方向のみに適用させることも可能で、横方向の場合はleft/rightを0にしてmargin-left/margin-rightをautoに、縦方向の場合はtop/bottomを0にしてmargin-top/margin-bottomをautoにすればそれぞれの方向の中央に揃います。

追記:なぜこの方法で中央揃えになるのか、詳しく解説しました。

margin: auto;の正体を暴く(応用編)

2021年11月6日

さて、最初はモーダルウィンドウは非表示でボタンを押した時に表示されます。非表示にするのと、jQueryで付け替える用のクラスの用意を行いましょう。アニメーションの設定もしておきます。

このようにvisibilityとopacityプロパティを用います。visibility: hidden;はdisplay: none;と似たような性質を持ちますがアニメーションを適用できるという違いがあります。

次にボタンを配置します。

これで見た目が出来ました。

動きをつける

さて、いよいよjQueryでクラスの付け替えをしていきます。まずはjQueryを読み込みます。

scriptタグはbodyの一番下に書いてください。そして、その次の行からクラス付け替えのコードを実装します。

モーダルと背景部分に対してクラスを付け替えて行きます。ボタンを押した時と背景部分を押した時に開閉がされるようになります。

背景のスクロールを止める

最後に、モーダルウィンドウが開いているときはスクロールできないようにしていきます。開いている時はスクロールを禁止し、閉じたら再度スクロールができるようになる必要があります。

そこでスクロールをして良いかを判定する変数を用意し、それを使って分岐を行います。fixedScroll関数でスクロールを固定に、releaseScroll関数で固定されたスクロールを解放します。

では、スクロールをどう固定するかです。

実はbodyタグにposition: fixedをつけるだけでスクロールができなくなります。メニューを開く時にそれが起こるようにしましょう。

ただ、これだけではコンテンツエリアのスタイルが崩れてしまうので、cssファイルに以下を追記しておきます。最上部に追記しましょう。

そして、メニューが閉じるときは今のと逆のことを行います。

これでスクロールの制御ができました。

しかし、これだけでは問題があります。ページを下部にいくらかスクロールした状態でメニューを開くとページ最上部にスクロールが戻ってしまいます。

そこで、すでにスクロールしていた高さ分、bodyを上にずらしましょう。topプロパティに負の値を指定すれば要素は上方向に移動します。

こうするとメニューを開いてもスクロール位置は変わりません。しかし、メニューを閉じるときにまたトップに戻ってしまうのでもうひと手間加えます。

このように、最初にずらした分だけ再度スクロールをさせてあげることでメニューを閉じた時にスクロール位置が変わらず元のコンテンツを閲覧できます。

ずらした高さはstyleから取得していますが、文字列かつ負の符号が付いています。そこで数値に変換(parseInt関数)してから符号を反転させています。

これでモーダルウィンドウ完成です!

まとめ

ということでモーダルウィンドウの作り方をなるべく細かく解説しました。

他にもいろんなパーツの解説をしていますので、ぜひご覧ください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

【徹底解説】5歳でも分かる、ハンバーガーメニューの作り方(jQuery編)

2021年10月20日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください