Webページ上でカーソル位置やクリックされた位置によって
ポップアップを出したりモーダル位置を調整したりツールチップを出したり
いろいろと処理を加えることがあると思います。
そんな際のページ上のポイント位置の座標（X座標／Y座標）を取得して
位置を調整する処理方法を簡単に紹介してみたいと思います。
jQueryでページ上の座標（X座標／Y座標）を取得する方法【ページ全体の場合】
ページ上のX座標・Y座標を取得するには
—————————–
X座標 = e.pageX
Y座標 = e.pageY
—————————–
を使って値を取得することができます。
各座標の値を取得するサンプルとして
ページ上のクリックされた位置のX座標／Y座標を取得してみると。
ページ上のクリックされたポイントのX座標／Y座標を取得（別枠で表示されます）※別枠で表示される画面内をクリックしてみてください。
クリックされたポイントに「●」を移動させています。
このサンプルのHTMLの構成は
「●」を表示するコンテンツ要素に対して
id名を「#locatedpoint」を付けて配置しています。
◆HTML <span id="locatedpoint">●</span>
CSSに関しては特に重要な項目がないので割愛します。
そしてクリックされた位置のX座標／Y座標を取得して
コンテンツ要素の位置調整をするスクリプトサンプルは以下のようになります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('html').click(function(e){
var x = e.pageX;
var y = e.pageY;
alert('X = ' + x + 'px, Y = ' + y + 'px');
$('#locatedpoint').css({top:(y),left:(x),display:'block'}).attr('title','TOP : '+(y)+'px | LEFT : '+(x)+'px');
});
});
</script>
クリックされた位置のX座標／Y座標の値をアラートで表示し
それぞれの値を「top」と「left」に入れて位置を変化させています。（ついでにtitle属性にも）
ページ内のX座標／Y座標を取得する場合は
ウィンドウ全体の左上からの位置が基準となりますが
ボックス要素などの決められた範囲の中の位置情報を取得するには
少し計算方法が変わります。
jQueryでページ上の座標（X座標／Y座標）を取得する方法【特定の範囲内の場合】
ページ全体のX座標／Y座標の値「e.pageX」と「e.pageY」とは別に
特定範囲の位置情報を取得する「.offset()」と併せて位置を調整します。
まずはサンプル動作から。
ページ上の特定の範囲内をクリックした際のポイントのX座標／Y座標を取得（別枠で表示されます）※別枠で表示される画面内の灰色の枠内をクリックしてみてください。
このサンプルのHTMLの構成は
「●」を表示するコンテンツ要素をid名「#locatedpoint」として
その全体をid名「#locatedarea」のブロック要素で囲っています。
◆HTML <div id="locatedarea"> <span id="locatedpoint">●</span> </div><!--/#locatedarea-->
CSSに関しては特に重要な項目がないので割愛します。
そしてボックス要素内でクリックされた位置のX座標／Y座標を取得する
スクリプトサンプルは以下のようになります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#locatedarea').click(function(e){
var areaOffset = $('#locatedarea').offset();
var offsetTop = ((e.pageY)-(areaOffset.top));
var offsetLeft = ((e.pageX)-(areaOffset.left));
alert('X = ' + offsetLeft + 'px, Y = ' + offsetTop + 'px');
$('#locatedpoint').css({top:(offsetTop),left:(offsetLeft),display:'block'}).attr('title','TOP : '+(offsetTop)+'px | LEFT : '+(offsetLeft)+'px');
});
});
</script>
特定範囲内でクリックされた位置のX座標／Y座標の値から
特定範囲のoffset値を引くことで位置の調整をしています。
この様にページ上のX座標／Y座標を取得することで
特定の位置にポップアップを出したりモーダル位置を調整したりツールチップを出したり
クリックされたポイントに何か表示するなど、いろいろと処理することが出来るかと思います。
ページ上のX座標／Y座標を取得する際に是非。。。