LightBox風にテキスト文を表示させるModalbox(モーダルボックス)
2013年11月23日
Categories | ホームページ
当サイト（HCZ.JP）では、画像を拡大する演出としてLightBoxを使用しています。
これは画像に関しての動作であり、テキスト文でも同じような表示が出来ないもの
かとググッてみたら、ヨサゲなものあったので実装方法等紹介します。
あ！その前にLightBox風（背面をグレーアウトさせて画像などを表示）みたいな
表示法をモーダルウィンドウって言うこと、皆さん知ってました？
私は今まで知りませんでしけど（汗）
ライセンス｜Open Source
ダウンロードした圧縮ファイル( jquery.modalbox-1.5.0.zip )を解凍します。
現状配布は1.5.0バージョンです。
まずhead内に下記の３行記述
1 2 3 4 5 6 7 | <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> |
あとは下記をそのままコピペして、文字の変更をして下さい。
1 2 3 4 5 6 7 | <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がオススメ）等で開き、
下記内容の２行目３箇所の数字を変更する。
1 2 | 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
55 56 57 | div#modalBox { width:600px; /* default wide */} |
ボックス内の白ベース 内側の余白
css > jquery.modalbox-skin-precious-white.css
７行目 デフォルトは15px
5 6 7 8 | div#modalBox div#modalBoxBody div.modalBoxBodyContent { background-color:white; padding:15px;} |
つづく
