Home > 技術 > IE6でレイヤーを表示するとプルダウンが前面にきてしまう現象

IE6でレイヤーを表示するとプルダウンが前面にきてしまう現象

2008-07-24 (木)
技術

lightBox系の実装をしている場合、画面全体を覆うレイヤー1枚とダイアログ用のレイヤー1枚を表示することがありますが、
このときに背景にプルダウンがあるとそのプルダウンを1番前面に来てしまう現象がIE6であります。
IE7ではこのバグが解消されていますが、まだまだIE6のシェアは高いのでサービスによってはこのバグを取りのぞかなけらばならない場合があります。

プルダウンメニューの上にレイヤーを重ねると、プルダウンが手前に表示されてしまう不具合が修正されていた。
via: PXT255; - Internet Explorer 7 ようやくリリース

方法としては画面にあるすべてのプルダウンを「display:none」にしてやる方法と「iFrameを使う」方法があります。

display:noneは結構力技でプルダウンの個数に速度が影響されるため、あんまりオススメできません。
なのでiFrameで画面全体を覆ってしまう方法をご紹介します。

以下サンプルソースです。
IE6の場合のみに、iFrameを作成し透過させます。
これで画面内にあるプルダウンが見えなくなるので、バグを防ぐことができるのです。

function isIE6(){
	if (typeof document.body.style.maxHeight == "undefined"){
		return true;
	}
	return false;
}

function hideSelectBox(){
	// IE6の場合
	if(isIE6()){
		if(document.getElementById("hideSelect")){
			return;
		}

// iFrameでプルダウンを隠す
		var objFrame = document.createElement("iframe");
		objFrame.setAttribute("id", "hideSelect");
		objFrame.style.cssText = "z-index: 9998;"+
								"position: absolute;"+
								"top: 0;"+
								"left: 0;"+
								"background-color: #fff;"+
								"border: none;"+
								"filter: alpha(opacity=0);"+
								"-moz-opacity: 0;"+
								"opacity: 0;"+
								"height: 100%;"+
								"width: 100%;";
		var objBody = document.getElementsByTagName("body").item(0);
		objBody.appendChild(objFrame);
	}

// テストなので3秒後にはプルダウンを表示する
	setTimeout(showSelectBox, 3000);
}

window.onload = hideSelectBox;

なんかトリッキーですが、これぐらいやらないとlightBox系の実装が不十分になってしまうんですね。
う～ん、IE6対応・・・果てしなくメンドクサイｗ

ちなみにこのコードはjQueryを使ったThickBox 3.1を参考にしています。
ありがとうございます！

■追記
どうやらhttpsのサイトでこのiFrameの方法を使うとIE6で確認らしきダイアログが表示されてしまうようです。
なのでプルダウンをdisplay:noneにする方法のほうが確かかもしれません。

■さらに追記
ewbi.develops: IE, IFRAME, and HTTPS
こちらでiFrameを使ったHTTPSサイト対応が書いてありました。

src="javascript:false;"

これを入れると大丈夫みたいです。ボクはまだ確認できてませんｗ

【関連する記事】

Comments:0

Trackback:0

TrackBack URL for this entry: http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1073
Listed below are links to weblogs that reference: IE6でレイヤーを表示するとプルダウンが前面にきてしまう現象 from HouseTect, JavaScripter Blog

Home > 技術 > IE6でレイヤーを表示するとプルダウンが前面にきてしまう現象

作ったもの

キングボンビーがサイトを侵略する？jQuery Plugin - kingbonbi.js作りました

なんかものが落ちるjQuery Plugin - JDropper作りました

RSS Feeds

Search

Recent Entries

Tag cloud

Categories

月別アーカイブ

このブログについて

author：hisasann

description：フリーランスで仕事しているプログラマーです。
最近はJavaScript、Rails、Java（Struts+Spring）なんかをいろいろといじっています。
今やってみたいのはFlashやActionScriptかな。
また誕生して半年になる子供の成長を見守るパパでもあります。

日々の日記 :

Hisasann’s Log@はてダ

他に運営しているブログ：

利用しているWebサービス :

最近のコメント

Powered by

Page Top