JavaScript : クリックした要素の位置を計算して、近くにウインドウを開く

もともと、parentNode でやってた処理なのですが、Google Chrome だけが offsetParent でしか動かないのでテストしてみると、皆一様に offsetParent で動いたのでコードを整理しました

Window 用の DIV の位置は、BODY の直後が望ましいです。

<script type="text/javascript">
function setWin(target,x,y,w,h) {
	var numY = target.offsetTop;
	var numX = target.offsetLeft;
	var obj = target;
	while( obj = obj.offsetParent ) {
		numY += obj.offsetTop;
		numX += obj.offsetLeft;
		if ( obj.tagName == 'BODY' ) {
			break;
		}
	}
	document.getElementById("win_base").style.top = (numY+y) + "px";
	document.getElementById("win_base").style.left = (numX+x) + "px";
	document.getElementById("win_base").style.width = w + "px";
	document.getElementById("win_base").style.height = h + "px";
	document.getElementById("win_base").style.display = "";
}
</script>
<div
	id="win_base"
	style='
		position: absolute;
		display: none;
		color: black;
		background-color: #E0E0E0;
		border-style: solid;
		border-color: #303030;
		border-width:1px;
		width:0px;
		height:0px;
		z-index:100;
	'>
	<input
		type="image"
		src="http://winofsql.jp/image/mcancel.png"
		style='float:right'
		onClick='this.parentNode.style.display = "none";'
	>
	<div id=win_box style='padding:2px;'></div>
</div>
<pre>

ウインドウを重ねて <input type="button" value="開く" onClick='setWin(this,50,-15,200,50)' style='width:200px;'>


</pre>

ウインドウを重ねて 



関連する記事

IFRAME ウインドウを非表示から開く時の位置調整