Wazap! Blog - ワザップ!ブログ

windowサイズを取得して透過背景を表示させる。

■DEMO
透過背景を表示させる

■CSS

#overlay {
	position: fixed;top: 0px;left: 0px;
	width:100%;height:100%;
	z-index:100;
}
* html #overlay { /* ie6 ハック */
	 position: absolute;
}
#overlayIn{
	background:url(http://blog.jp.wazap.com/wordpress/wp-content/uploads/2008/07/overlay.png);
}
* html #overlayIn{ /* ie6 ハック */
	background-color:#666;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

下記Javascriptで生成されたelementに対してstyleを指定。
*Javascriptで要素を作成する。
ポイントは、IE6で透過pngが使えないので、filter:alphaでカラー#666のアルファ値をさげている事。

■Javascript

function overlay() {
	if (document.documentElement.clientWidth) {
		var div = document.createElement("div");
		div.id = "overlay";
		var divIn = document.createElement("div");
		divIn.id = "overlayIn";
		var width = document.documentElement.clientWidth;
		var height = document.documentElement.clientHeight;
		var divInwidth = divIn.offsetWidth;
		var divInheight = divIn.offsetHeight;
		divIn.style.width = width + "px";
		divIn.style.height = height + "px";
		div.appendChild(divIn);
		var objBody = document.getElementsByTagName("body").item(0);
		objBody.appendChild(div);
	}
	Event.observe('overlay', 'click', function(){
		objBody.removeChild(div);
	});
}

Javascriptはこんな感じ。
windowサイズを取得して、要素を生成して、クリックしたら透過背景が消えるという事をやっています。

後は、ここにコンテンツを生成すれば、簡易型Lightboxの出来上がりです。

その2は、表示させるコンテンツ等をJavascriptで生成するやり方。
完成図はこれ。↓

ちょーシンプルなレイアウト。
Javascriptはこちら↓

<script type="text/javascript">
window.onload = function(){
var div = document.createElement("div");
div.id = "dialog";
div.style.width = '200px';
div.style.height = '200px';
div.style.borderWidth = '1px';
div.style.borderStyle = 'solid';
div.style.borderColor = '#000';
var img = document.createElement("img");
img.setAttribute('src' ,'http://img.jp.wazap.com/images/blog/logo.png');
img.style.marginTop = '57px';
div.appendChild(img);
var objBody = $("dialogSample2");
objBody.appendChild(div);
}
</script>

このスクリプトは単純にdivにborderを指定して、画像をその中に入れただけ。

今回はブログ用にvar objBody = $(”dialogSample2″);としたが、var objBody = document.getElementsByTagName(”body”).item(0);としてbodyの直下に指定する事もできる。

今回はここまで。

■IE6では透過png背景の中にanchorタグを入れるとリンクがきかなくなるバグがあるので、このバグの回避から。
ちなみにIE6で透過pngを使うにはAlphaImageLoaderを指定する。

■DEMO

■CSS
div#overlay{
background:url(overlay.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’overlay.png’,sizingMethod=’scale’);//for IE6
}

これだとIE6でアンカーリンクが効かないので、アンカーリンクの親エレメントタグにposition:relative;を指定する。

■DEMO

■CSS
div#overlay{
background:url(overlay.png);
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’overlay.png’,sizingMethod=’scale’);//for IE6
}
div#overlayIn{
position:relative;
}

FireFoxでは問題ないのですが、IE6はこれで回避されます。