余白

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

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内に下記の3行記述

<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内3行の href=”×××” と

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

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

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

参考まで

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

背面グレイアウトの明暗

js > jquery.modalbox-1.5.0-min.js

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

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


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

7行目 デフォルトは15px

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

つづく

Comment(0) | Trackback(0)

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