Qiitaに投稿されていた「スマホで使えるシンプルなモーダルウィンドウ」のdemoページを作って検証してみた

前置き

• IE対応
• レスポンシブ対応
• iPhoneで背景がスクロールされない（←重要！）

というモーダルウィンドウを探しても、なかなかこれだ！というものを見つけられない。
そんなときディレクター様から「これなんかどう？」と紹介されたのがこのページ。Qiitaで@kitikitchenさんが投稿していた「スマホで使えるシンプルなモーダルウィンドウ」です。

スマホで使えるシンプルなモーダルウィンドウ - Qiita

モーダルウィンドウを実装したい、でもライブラリ使うほどの要件ではない。といった時に使える自前でパパっとモーダルウィンドウの実装。##やりたいこと- 要素（ボタンやaタグ）をクリックしたらモーダルウィンドウが表示される- モー...

作ってみた

順を追って解説されているので勉強しつつ、デモページで実装したのは一番最後の例の、
モーダルウィンドウ下のコンテンツをスクロールさせたくない場合

若干デザイン調整しましたが、基本的にそのまんまです。

HTML、CSS(SCSS）、JavaScriptの記述は元記事を参照してください。

デモページ

PCのIE、Safari、Firefox、Edge、Chromeでも問題なし！
iPhoneのSafariでもモーダルの背景が動かない。すごい！
もちろんAndroidのChromeでも問題なし！

欲を言えば複数あるモーダルウィンドウ間を（ページネーション的に）横遷移できたらいいんですが、これは自分で勉強しなさいってことですよね……。