モーダルウィンドウをレスポンシブ対応に変更 「Boxer」 と 「Magnific Popup」
2015年4月20日
Categories | ホームページ
ホームページには必須と言っても過言ではないモーダルウィンドウ。
（Modal window）
その中でも代表的な「Lightbox」を当サイトでも長年利用してます。
が、最近GoogleがレスポンシブWebデザインを推奨してきたので、
他のものに乗せ換えようと試みました。
で、試してみたのが Lightboxプラグイン「Boxer」。
http://formstone.it/components/lightbox/
対応として、レスポンシブ・スワイプ・動画「youtube等」と申し分ないが、
実装してみると、動画が表示が中々うまくいきません。
色々とオプション設定も試みましたが、諦めました。
因みにＰＣで動画（youtube）をモーダル表示するとこんな感じです。
スマホだとこんな感じ。（width:360px）
何かしら間違ったことをやらかしていないか、丸々1日を費やし検証したが、
思うように表示されない。一旦は諦めたが後日その原因を見つけた。
どこかの縦サイズを指定したら、うまく表示されるようになった。
でもどこいじったか忘れてしまった。
追伸 2019.9月
いつの間にか表示されなくなった。
原因は定かではないが、私が思うに、
各種ブラウザがバージョンアップされたため、対応しなくなった？ような・・・
Boxerサイトでは新たなバージョンも公開されたようだが、
現在実装しているページ（HCZ-TV）は、
「Magnific Popup」に全て載せかえることにしました。
次に試したのが
Magnific Popup
http://dimsemenov.com/plugins/magnific-popup/
class名やid名をHTML要素で囲むだけで、
既存のソースには殆ど手を加えなくてもいい、非常にシンプルな設計。
その内気変わりして他のモーダルに乗せ換えるかもしれないが、
暫く使ってみることにします。
コメントを残す