これまで制作してきたモーダルはモバイルのLandscapeを考慮したものではなかった。

それ故、前回「オーバーレイ・エフェクトとレスポンシブ・モーダル」というものを作った。ここでの成果は小さなモーダルを作ることができたことだ。だが、PC向けでは以前のように大きく表示したい欲求不満が残った。

そこで、今回はPC向けとモバイル向けの二種類の大小のモーダルを用意してPC用とモバイル用で別々のモーダルをスイッチさせて表示しようと考えた。

実現方法は、PC向けとモバイル向けのモーダルのリンク元画像一式を併記して「display:noneとdisplay:block」を使って表示と非表示をレスポンシブで使い分けることだ。

つまり、PCで見るときはPC用のリンク付き画像だけを表示してモバイル用は非表示になる。

モバイルで見るときはPC用のリンク付き画像は非表示になり、モバイル用のリンク付き画像が表示されるという具合である。タップすると、指定されたモーダルを表示する。

本文中のテキストからモーダルを開く場合も同様である。テキストが段落からズレないようにするためには、表示させる場合は「display: inline」を使う。

イメージのみを開きたい場合がある。不要なものは一切排除して(特に画面が狭いモバイルを配慮して)、ボタンまでも排除したものを以下の「イメージのみ開く(1)(2)」に作ってみた。イメージの右上にFont Awesome の を表示させてピンチアウトができることを表示した。(2020年2月4日加筆)

モーダルウィンドウはズームを可能にする

幣サイトではslick.jsを使っているが、これを使っているとズームが効かなくなる。このことは本来極めて痛い。

モーダルはイメージを大きく表示したり、説明を付け加えたりして、追加情報を付加することができる。しかし、その本来の目的以外に、モーダル内ではピンチアウトしてズームさせることが可能だ。