モーダルウィンドウ

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

2015年4月20日

Categories | ホームページ

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

（Modal window）

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

 

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

 

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

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

 

 

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

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

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

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

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

因みにＰＣで動画（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日 |

LightBox風にテキスト文を表示させるModalbox(モーダルボックス)

2013年11月23日

Categories | ホームページ

当サイト（HCZ.JP）では、画像を拡大する演出としてLightBoxを使用しています。

これは画像に関しての動作であり、テキスト文でも同じような表示が出来ないもの

かとググッてみたら、ヨサゲなものあったので実装方法等紹介します。

あ！その前にLightBox風（背面をグレーアウトさせて画像などを表示）みたいな

表示法をモーダルウィンドウって言うこと、皆さん知ってました？

私は今まで知りませんでしけど（汗）

 

配布先：jQuery Plugin “modalBox”

ライセンス｜Open Source

2013 1122 01 300x199 LightBox風にテキスト文を表示させるModalbox(モーダルボックス)ダウンロードした圧縮ファイル( jquery.modalbox-1.5.0.zip )を解凍します。

2013 1122 02 LightBox風にテキスト文を表示させるModalbox(モーダルボックス)

現状配布は1.5.0バージョンです。

 

まずhead内に下記の３行記述

<head>

<link rel="stylesheet" href="css/jquery.modalbox.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.modalbox-1.5.0-min.js"></script>

</head>

あとは下記をそのままコピペして、文字の変更をして下さい。

<a class="openmodalbox" href="javascript:void(0);" title="実装方法">
実装方法
<span class="modalboxContent">
実装方法はこうだ！！
テキスト文字をここに記述するのだ！
</span>
</a>

小難しいことでもないので、簡単に出来ると思います。

もしうまく動かない場合は、先ほど説明したhead内３行の　href=”×××”　と

sec=”×××”　チョメチョメの部分（ファイルの置いてある場所）の記述を間違えてる

かも。再度確認して下さい。

ボックス表示の設定を少しいじってみました。

参考まで

Modalbox(モーダルボックス) 設定方法

背面グレイアウトの明暗

js > jquery.modalbox-1.5.0-min.js

上記ファイルをテキストエディター（TeraPadがオススメ）等で開き、

下記内容の２行目３箇所の数字を変更する。


black:"background-color:#000;
filter:alpha(opacity=40); -moz-opacity:0.4; opacity:0.4;"

デフォルトは「40 / 0.4 / 0.4」に設定してあるが、「4」の数字を大きくすると

暗くなり、少なくすると明るくなる。3箇所とも同じ数字に。

どこに記述されているか分からない場合、「ctrl + F」 を押すと検索窓が出現する

ので、「black:”background-color:#000;」で検索する。


ボックスの横幅サイズ

css > jquery.modalbox-basic.css

56行目　デフォルトは600px

div#modalBox {
	width:600px; /* default wide */
}

ボックス内の白ベース 内側の余白

css > jquery.modalbox-skin-precious-white.css

７行目　デフォルトは15px

div#modalBox div#modalBoxBody div.modalBoxBodyContent {
	background-color:white;
	padding:15px;
}

つづく

Comment(0) | Trackback(0)

TAGS: / / / / / / / / / | 2013年11月23日 |