SP向けモーダルウィンドウのテンプレート

Icon made from Icon Fonts is licensed by CC BY 3.0

フレームワークなしでのSP向けモーダルウィンドウの実装メモ。

モーダルウィンドウの注意

画像の拡大などによく使われるが、アクセシビリティ的によくない場合が多いので注意。経験的によくあるbadな部分は、以下3つだと思う。 - 閉じ方がわかりにくく、元のページに戻れない - スクロールできるのかよくわからない - 実装ミスでコンテンツ全体が結局描画されない（かつ、そのせいで閉じる系リンクが表示されず、ページ更新orブラウザの閉じるでしか復帰できない）

特にモーダルウィンドウに拘らなければ、collapse系の開閉型コンテンツにしたほうがいい場合もあるので実装時には注意が必要。

テンプレート

Qiitaのこちらの記事を参考にしました。

qiita.com

SP向けといっている部分は、flexをふんだんに使っているためです。

実装はcodepen

See the Pen sp_modal by Cartman (@Cartman0) on CodePen.

code memo

階層構造

.modal(position: fixedにより、画面全体を基準とする)
- .modal_container (モーダルウィンドウのラッパー、水平垂直中央ぞろえはこの部分)
  - modal_inner（実際にモーダルウィンドウの部分、テンプレートでは背景白）
    - modal_block（実際のコンテンツを配置、非表示・表示(display: hidden, display: block)はこの部分で行う）
      - modal_header：モーダルウィンドウのヘッダ部分（テンプレでは閉じるリンクを配置）
      - modal_content: 主要コンテンツ
      - modal_footer：モーダルウィンドウのフッタ部分（テンプレでは閉じるリンクを配置）