@HTML
<!-- *******************************************************
BODY
******************************************************** -->
<DIV onClick='$("win").style.display = "none";'
style='
border-style: solid;
border-color: black;
border-width:1px;
'
>
<DIV style='background-color:white;position:relative'>
ウインドウを開くボタン <INPUT
id='btn'
type='button'
value="開く"
onClick='setWin();event.cancelBubble = true;'
>
<!-- ユーザーウインドウ-->
<DIV
id="win"
style='
position: absolute;
display: none;
color: black;
background-color: pink;
border-style: solid;
border-color: CRIMSON;
border-width:1px;
width:300px;
'
onClick='event.cancelBubble = true;'><INPUT type="button" value="x" style='float:right' onClick='$("win").style.display = "none";'><DIV
style='
padding: 20px;
'
>このウインドウより外側の
枠線より内側をクリックすると
ウインドウが閉じます</DIV></DIV>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</DIV>
<SCRIPT
language="javascript"
type="text/javascript"
src="http://lightbox.in.coocan.jp/prototype.js">
</SCRIPT>
<SCRIPT language="javascript" type="text/javascript">
// *********************************************************
// 関数
// *********************************************************
function setWin() {
$("win").style.top = $("btn").offsetTop + "px";
$("win").style.left = ( $("btn").offsetLeft + 60 ) + "px";
$("win").style.display = "";
}
</SCRIPT>
</DIV>
@HEND
@DIV
<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<TITLE>HTML テンプレート</TITLE>
<STYLE type="text/css">
* {
font-family: "MS Pゴシック";
font-size: 12px;
}
BODY {
background-color: forestgreen;
color: white;
}
</STYLE>
<LINK rel="stylesheet" type="text/css" href="style.css">
<SCRIPT
language="javascript"
type="text/javascript"
src="http://lightbox.in.coocan.jp/prototype.js">
</SCRIPT>
<SCRIPT language="javascript" type="text/javascript">
// *********************************************************
// 関数
// *********************************************************
function setWin() {
$("win").style.top = $("btn").offsetTop + "px";
$("win").style.left = ( $("btn").offsetLeft + 60 ) + "px";
$("win").style.display = "";
}
</SCRIPT>
</HEAD>
<!-- *******************************************************
BODY
******************************************************** -->
<BODY onClick='[[$("win").style.display = "none";]]'>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<DIV style='background-color:white;[[position:relative]]'>
ウインドウを開くボタン <INPUT
id='btn'
type='button'
value="開く"
onClick='setWin();event.[[cancelBubble]] = true;'
>
<!-- ユーザーウインドウ-->
<DIV
id="win"
style='
position: absolute;
display: none;
color: black;
background-color: pink;
border-style: solid;
border-color: CRIMSON;
border-width:1px;
width:300px;
'
onClick='event.[[cancelBubble]] = true;'>
<INPUT type="button" value="x" style='float:right' onClick='$("win").style.display = "none";'>
<DIV
style='
padding: 20px;
'
>
ああああああああああああ<br>
ああああああああああああ<br>
</DIV>
</DIV>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</DIV>
</BODY>
</HTML>
@END
|