モーダルウィンドウをレスポンシブ対応に変更 「Boxer」 と 「Magnific Popup」

Categories | ホームページ

ホームページには必須と言っても過言ではないモーダルウィンドウ。

Modal window

その中でも代表的な「Lightbox」を当サイトでも長年利用してます。

 

0420 01 400x300 モーダルウィンドウをレスポンシブ対応に変更 「Boxer」 と 「Magnific Popup」

 

が、最近GoogleがレスポンシブWebデザインを推奨してきたので、

他のものに乗せ換えようと試みました。

 

 

で、試してみたのが Lightboxプラグイン「Boxer」

http://formstone.it/components/lightbox/

対応として、レスポンシブ・スワイプ・動画「youtube等」と申し分ないが、

実装してみると、動画が表示が中々うまくいきません。

色々とオプション設定も試みましたが、諦めました。

因みにPCで動画(youtube)をモーダル表示するとこんな感じです。

 

0420 02 364x400 モーダルウィンドウをレスポンシブ対応に変更 「Boxer」 と 「Magnific Popup」

 

スマホだとこんな感じ。(width:360px)

 

0420 03 240x400 モーダルウィンドウをレスポンシブ対応に変更 「Boxer」 と 「Magnific Popup」

何かしら間違ったことをやらかしていないか、丸々1日を費やし検証したが、

思うように表示されない。一旦は諦めたが後日その原因を見つけた。

どこかの縦サイズを指定したら、うまく表示されるようになった。

でもどこいじったか忘れてしまった。

 

追伸 2019.9月

いつの間にか表示されなくなった。

原因は定かではないが、私が思うに、

各種ブラウザがバージョンアップされたため、対応しなくなった?ような・・・

Boxerサイトでは新たなバージョンも公開されたようだが、

現在実装しているページ(HCZ-TV)は、

Magnific Popup」に全て載せかえることにしました。

 

 

 

次に試したのが

Magnific Popup

http://dimsemenov.com/plugins/magnific-popup/

0420 04 400x300 モーダルウィンドウをレスポンシブ対応に変更 「Boxer」 と 「Magnific Popup」

class名やid名をHTML要素で囲むだけで、

既存のソースには殆ど手を加えなくてもいい、非常にシンプルな設計。

DEMOページ01 DEMOページ02 もご覧ください。

 

その内気変わりして他のモーダルに乗せ換えるかもしれないが、

暫く使ってみることにします。

Comment(0) | Trackback(0)

TAGS: / / / / / | 2015年4月20日 |

« »

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です