ページ下部にバルーンを表示するスクリプト【jQuery】

とある依頼でページ下部にバルーンを表示するスクリプトを書いたのですが、なぜか必要無くなったということで公開することにしました。

キャプチャ

上記のようなバルーンが画面の右下に表示されます。「X」を押すとバルーンが消えます。

使い方

head要素内やらbody要素の終了タグの直前からにscript要素で指定するだけで使えます。

<script src="noteBalloon.js"></script>

コメントのカスタマイズ

JSファイルの20行目あたりに、以下のような記述があります。「メッセージはこちらに記述してください。<a href="#">リンクとかもOKです。</a>」の部分を書き換えてください。

var masseage = {
	'contents' : 'メッセージはこちらに記述してください。<a href="#">リンクとかもOKです。</a>'
};

対応ブラウザ

  • デスクトップブラウザ全般

但し、IE8以下は知りません。また、デスクトップ向けに書いたので、一応動作すると思いますが、モバイル向けブラウザでは対応外としています。

jQueryのバージョン

jQueryは1.7以上を想定しています。それ未満の場合は、44行目に以下のような記述があります。そこのonを bindに変えてください。

	$('#noteBalloonClose a').on('click', this.close);

バルーンのデザイン

バルーンのデザインを変更する場合は、24行目あたりに以下の記述があります。文字の色や背景色等の変更は、それぞれの値を変更すればデザインの変更ができます。

var style = {
	width        : '20%',
	position     : 'fixed',
	bottom       : '1%',
	right        : '1%',
	zIndex       : 1000000,
	border       : '1px solid #999999',
	borderRadius : '10px',
	padding      : '5px 10px 10px',
	background   : '#ffffff',
	color        : '#000000',
	boxShadow    : '1px 1px 5px rgba(0, 0, 0, 0.6)',
	display      : 'none'
};

ライセンス

ライセンスは別にどうでもよいのですが、一応、MITライセンスです。

ファイルのダウンロード

noteBalloon.jsがそのファイルになります。