THE HAM MEDIA BLOG

前回のエントリーで画面にレイヤーなどが表示されるような
jQueryのプラグインを試して紹介したが、
今回はそれっぽいものを自分で作ってみることにした。

Lightboxにしろムーダルボックスにしろ、
半透明のレイヤーで画面が覆われるスクリプトが多々あって、
どうやって作るんだ？なんて思っていたけど、
画面全体を覆うレイヤーがあればいいのか！
なんて思ってみたので、実験してみることにした。

試作プラグイン

■ プラグイン本体

(function($){
$.overLay = function(settings){
	var c = $.extend({
		selector: '#overlay',
		bgColor: '#ffffff',
		opacityPoint: 0.6,
		time: 3000
	}, settings);
		
	$(c.selector).remove();
	var style = 'display:block;width:100%;height:5000px;position:absolute;left:0px;top:0px;background:'+ c.bgColor +';z-index:1;';
	$("body").append('<div id="overlay" style="'+ style +'"></div>');
	$(c.selector).css('opacity' , c.opacityPoint);
	setTimeout(function(){
		$(c.selector).fadeTo(500,0).css('height','100%');
	},c.time);
};
})(jQuery);

■ プラグイン呼び出し 例１

$(function() {
	$.overLay();
});

↑$()の中身はなんでもよかったりする…
スマートな表示じゃないのがちょっと気にくわないけど、
これを入れないと表示してくれなかったので断念していれた。

コレを入れなくても表示させる方法ってあるかな・・・

※追記(10/22 21:15)
ソースを修正しました！
cyokodogさんのおかげでスマートに書くことができました！
このような場合はfnはなくてもよいのですね。
勉強になります！ありがとうございました。

■ プラグイン呼び出し 例２

$(function() {
	$('div.preview a').click(function(){
		$().overLay();
		return false;
	});
});

クリックさせたときに表示させる。
でもまだまだ修正必要だな。
これもあとで修正ひつようかな。

サンプルデモ

今回はクリックしたら表示されるようにしてみました。

試作プラグインのオブション

一応プラグインなのでオプションもつけてみてある。
呼び出すときに以下の３点については変更可能。

$(function() {
	$.overLay({
		//レイヤー色、デフォルトが白(#ffffff)
		bgColor: '#000',
		//レイヤーの透明度、デフォルトが0.6
		opacityPoint: 0.4,
		//レイヤーの表示時間、デフォルトが3000
		time: 1000
	});
});

変更は一つでも出来る。
最後の指定ではコンマ(,)を入れると表示されなくなるブラウザもあるので、
オプションを入れる最後はコンマ(,)入れないように！

今後のこのプラグイン

とりあえず仮に作ってみたプラグインなので、
動作保障はしません。
仕組みとして、body内の最後にdivタグをheight:5000pxで表示して
それが全体を覆っているだけの仕組みである。
問題として、開いたその画面が5000px分の長さをとること。
つまり、表示しているページが5000px以下だったばあい、
スクロールすると、通常時よりも高くなってしまうのである。

これは今後なんとかしてみたいもの。

それと、次のステップとして、スクロールがですぎてしまうだけでなく、
この表示されるレイヤーより前面に何か表示できるようにしたい。
お待ちくださいとかのアナウンスでもいいし、
ムーダルボックスのようなのを表示させるでもいい。
とにかく時間を見つけて進化させていこうと思う。