ポップアップレイヤー
<html>
<head>
<title>ポップアップレイヤー</title>
<script language="JavaScript">
<!--
/* レイヤーを表示 */
function showlayer(e,idName){
/* クリックした箇所を取得 */
if (document.all){ //IE
curX = event.clientX;
curY = event.clientY;
}
else{ // NN
curX = e.pageX;
curY = e.pageY;
}
/* レイヤーを表示する位置 */
layerX = curX+10;
layerY = curY+5;
if (document.all){ // IE
document.all(idName).style.left = layerX;
document.all(idName).style.top = layerY;
document.all(idName).style.visibility = "visible";
}
else if (document.getElementById){ //NN6
document.getElementById(idName).style.left = layerX;
document.getElementById(idName).style.top = layerY;
document.getElementById(idName).style.visibility = "visible";
}
else if (document.layers){ //NN4
document.layers[idName].left = layerX;
document.layers[idName].top = layerY;
document.layers[idName].visibility = "visible";
}
}
/* レイヤーを非表示 */
function closelayer(idName){
if (document.getElementById){
document.getElementById(idName).style.visibility = "hidden";
}
else if (document.all){
document.all(idName).style.visibility = "hidden";
}
else if (document.layers){
document.layers[idName].visibility = "hidden";
}
}
//-->
</script>
<style type="text/css">
#memo1 { position:absolute;visibility:hidden;z-index:2; }
</style>
</head>
<body>
<A href="JavaScript:void(0)" onClick="showlayer(event,'memo1')">ココをクリックする</A>と、ポップアップレイヤーが表示されます。<br>
<span id="memo1">
<table border="0" cellspacing="0" cellpadding="5" width="200" height="50" bgcolor="#EEEEEE">
<tr>
<td>ポップアップ表示されるレイヤーです</TD>
</tr>
<tr>
<td align="right"><A href="JavaScript:closelayer('memo1')">×</A></td>
</tr>
</table>
</span>
</body>
</html>
※クリックすると、ポップアップレイヤーが表示されます。
<HEAD>〜</HEAD> 内において、JavaScript で
ポップアップレイヤーを表示する関数 showlayer() と、
ポップアップレイヤーを非表示にする関数 closelayer() を
定義します。
関数はそのまま使用できます。
クリックした箇所からの相対位置にポップアップレイヤーを表示させています。
上記の例では、クリックした箇所からX座標で10px右（layerX = curX+10）に、
Y座標で5px下（layerY = curY+5）にポップアップレイヤーが表示されるように設定しています。
ここは自由に変更していただいて結構です。
ポップアップレイヤーのスタイルシートを設定します。
<style type="text/css">
#memo1 { position:absolute;visibility:hidden;z-index:2;width:200; height:50; }
</style>
レイヤーの位置を絶対位置で表示させるので、position:absolute; とします。
ポップアップレイヤーは最初表示されませんので、visibility:hidden で見えなくしています。
また、ページ上に重ねて表示させるため、z-index:2（数値が大きいほど上に重なる）に
しています。
クリックしてポップアップレイヤーを表示させる箇所は
<A href="JavaScript:void(0)" onClick="showlayer(event,'memo1')"> .... </A>
と記述します。
'memo1' は、表示させるポップアップレイヤーのIDです。
ポップアップレイヤーを記述します。
<span id="memo1">
<table border="0" cellspacing="0" cellpadding="5" width="200" height="50" bgcolor="#EEEEEE">
<tr>
<td>ポップアップ表示されるレイヤーです</TD>
</tr>
<tr>
<td align="right"><A href="JavaScript:closelayer('memo1')">×</A></td>
</tr>
</table>
</span>
上記の例では、ポップアップレイヤーに "memo1" というIDを付けています。
<A href="JavaScript:closelayer('memo1')">×</A>
「×」をクリックすると、レイヤーを閉じる関数を呼び出します。
ここで閉じるレイヤーのIDを指定します。
ポップアップレイヤーはいくつでも記述できます。
その際、id="????"で指定しているIDが重複しないようにしてください。
また、上記の例では、スタイルシートをIDで設定し、ポップアップレイヤーの
IDと一致させていますが、スタイルシートをクラスで設定し、
<SPAN id="menu1" class="????"> とすることもできます。
ホームページ作成ガイド
ホームページ作成ガイド