ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
WEB ページで、DIV なウインドウを開く ( No.0 )
 日時： 2018/02/04 19:11
名前： lightbox


 







	ウインドウを開くボタン 


	
	

	






















拡張子:
<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<TITLE>HTML テンプレート</TITLE>
<STYLE type="text/css">
* {
	font-family: "ＭＳ Ｐゴシック";
	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>