LightBox風にテキスト文を表示させるModalbox(モーダルボックス)
2013年11月23日
Categories | ホームページ
当サイト（HCZ.JP）では、画像を拡大する演出としてLightBoxを使用しています。
これは画像に関しての動作であり、テキスト文でも同じような表示が出来ないもの
かとググッてみたら、ヨサゲなものあったので実装方法等紹介します。
あ！その前にLightBox風（背面をグレーアウトさせて画像などを表示）みたいな
表示法をモーダルウィンドウって言うこと、皆さん知ってました？
私は今まで知りませんでしけど（汗）
ライセンス｜Open Source
ダウンロードした圧縮ファイル( jquery.modalbox-1.5.0.zip )を解凍します。
現状配布は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;
}
つづく
