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

Pocket
LINEで送る

前置き

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

というモーダルウィンドウを探しても、なかなかこれだ!というものを見つけられない。
そんなときディレクター様から「これなんかどう?」と紹介されたのがこのページ。


でも、デモページが無い(シャレじゃないです)。なら作るしかない!

作ってみた

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

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

デモページ

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

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

Pocket
LINEで送る

back to top