▼ ページのリンクを全て


▼ ページのリンクを全て
VBScript ガイド

【クロスブラウジング】影(ドロップシャドウ)付きポップアップウインドウの作成


ブラウザでダウンロード


影を付ける
Yahoo UI のメニューで行われている方法で、opacity を使用して
半透明の 同じサイズの DIV を表示したい DIV の後ろに置いて、
必要なだけずらすという処理で実現します。

※ 座標の効果が IE と それ以外で微妙に違うので、ブラウザ毎の調整になります

以下が、ポップアップウインドウ用の DIV セットですが、
ページの最後に記述します
<!-- ポッフアップ DIV の影用 -->
<DIV id="winShadow" class="popupShadow"
	style='display: none;'
></DIV>

<!-- ポッフアップ DIV -->
<DIV id="win" class="popupDiv"
	style='display: none;'
	onClick='event.cancelBubble=true;'>
<DIV style='padding: 10px;'>
ここに内容を書く<br>
ここに内容を書く<br>
ここに内容を書く<br>
ここに内容を書く<br>
ここに内容を書く<br>
</DIV>
</DIV>
DIV が二重になっているのは、padding によって、ウインドウ幅が変更されしまうので
IE と それ以外の差を HTML(CSS) 側で吸収する為です

要素側に display: none; が指定されていますが、表示処理の問題で
これはこのように記述する必要があります。
.popupDiv {
	position: absolute;
	color: black;
	background-color: white;
	border-style: solid;
	border-color: black;
	border-width:1px;
	width:450px;
}

.popupShadow {
	position: absolute;
	width: 450px;
	background-color: #000;
	opacity: .18;
	filter: alpha(opacity=18);
}


ウインドウを開く場所の定義
どのような要素でも良いのですが、ここでは DIV 内に 
画像とテキストを埋め込んで使用しています。

float: right を使用して、h(n) 要素の最初に書く事によって、常に右端に表示されます
<H1>
<div class="openElement" onClick='setWin(this);event.cancelBubble=true;'>
<IMG src="mbtn.png" style='vertical-align:middle;'>
<div>ポップアップDIV</div></div>
一番外側</H1>
h1 {
	font-size: 14px;
	border-style: solid;
	border-width: 1px;
	border-color: #9192A3;
	padding: 7px 0px 8px 13px; 
	background: url(h1.png) repeat-x 0px 0px;
}

.openElement {
	float: right;
	margin-top: -5px;
	font-size: 13px;
	font-weight: normal;
	cursor: pointer;
}

.openElement div {
	margin-top: -16px;
	margin-left: 15px;
	margin-right: 10px;
}


JavaScript( 位置コントロール )
クリックされた位置を取得するのが主です。

どのような WEB ページでも動作するとは思えないので、その場合は調整が必要です
// *********************************************************
// クリックされた横に影付きウインドウを開く
// *********************************************************
function setWin(clickedElement) {

	var obj = clickedElement;
	var numX = 0;
	var numY = 0;

	if ( obj.offsetTop > 0 ) {
		numY += obj.offsetTop;
	}
	numX += obj.offsetLeft;
	while( obj = obj.offsetParent ) {
		if ( obj.tagName == 'BODY' ) {
			break;
		}
		if ( obj.offsetTop > 0 ) {
			numY += obj.offsetTop;
		}
		numX += obj.offsetLeft;
	}


	document.getElementById("win").style.top = numY + "px";
	document.getElementById("win").style.left = (numX-450-2) + "px";
	document.getElementById("win").style.display = "";
	document.getElementById("winShadow").style.height = 
		document.getElementById("win").clientHeight + "px";

	if (window.navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
		document.getElementById("winShadow").style.top = 
			(numY + 6) + "px"
		document.getElementById("winShadow").style.left = 
			(numX-450-2+4) + "px";
	}
	else {
		document.getElementById("winShadow").style.top = 
			(numY + 6) + "px"
		document.getElementById("winShadow").style.left = 
			(numX-450-2+6) + "px";
	}
	document.getElementById("winShadow").style.display = "";
}

// *********************************************************
// ポップアップ DIV を閉じる
// *********************************************************
function closeWin(clickedElement) {

	document.getElementById("win").style.display = "none";
	document.getElementById("winShadow").style.display = "none";

}


JavaScript( ウインドウを閉じる )
ポップアップウィンドウの範囲以外をクリックした時に閉じる為に
BODY の クリックイベントで閉じます

また、このイベントが DIV 内で処理されないように、DIV 内と 開く為のクリックエリアでは
event.cancelBubble=true; を実行しています
<BODY onClick='closeWin()'>