4種類の２次ウインドウ

目次

ポップアップウインドウ ( Popup Object )
インラインフレーム
モーダルダイアログ
モードレスダイアログ

ポップアップウインドウ ( Popup Object )

A エリアにマウスカーソルを移動して下さい

JavaScript 例

<SCRIPT language=JavaScript>

// オブジェクト作成
var objPopup = window.createPopup();

function MyPopup() {

	objPopup.document.body.style.backgroundColor = "skyblue"
	objPopup.document.body.style.borderWidth = 4
	objPopup.document.body.style.borderStyle = "ridge"
	objPopup.document.body.innerHTML = 
		"<TABLE cellpadding=5 >" +
		"<TR>" +
		"<TD style='font-weight:bold'>" +
		"表示文字列" +
		"</TD>" +
		"</TR>" +
		"</TABLE>"

	// x, y, width, height
	// document.body を指定しているので BODY の相対位置
	objPopup.show( 100, 100, 300, 70, document.body );

}

function ClosePopup() {

	// 非表示( 閉じる )
	objPopup.hide();

}

</SCRIPT>

<BODY>

<TABLE style='table-layout:fixed' cellspacing=1 bgcolor=black>
<TR>
<TD
	width=100 height=50
	onMouseover='MyPopup()'
	onMouseout='ClosePopup()'
	bgcolor=white
>A
</TD>
<TD width=100 height=50 bgcolor=white>B
</TD>
<TD width=100 height=50 bgcolor=white>C
</TD>
</TR>
</TABLE>


</BODY>

インラインフレーム

参照に関して一番注意するのは、IFRAME 内にアクセスするのに frames コレクションを使用するという事です
IFRAME 内から親ページにアクセスする場合は、文字通り parent プロパティ(window オブジェクト) を使用します

IFRAME の初期属性を非表示にし、インラインスタイルに absolute を指定する事によって自由な位置でページ
内に出現する「ウインドウ」を実装しています

IFrame.htm

<SCRIPT language=JavaScript>

function MyIFrame() {

	// このページの IFRAME オブジェクトへのアクセス
	var objFrame = document.all( "RefFrame" );
	objFrame.style.display = "";

	// IFrame 内の オブジェクトのアクセス
	var objFrameWin = document.frames("RefFrame")
	objFrameWin.document.all("Field").value = "IFrame を開く";

}

function CloseIFrame() {

	// このページの IFRAME オブジェクトへのアクセス
	var objFrame = document.all( "RefFrame" );
	objFrame.style.display = "none";

}

</SCRIPT>

<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
</HEAD>
<BODY>

<INPUT type=text name=Field>
<INPUT type=button value="IFrame を開く" onClick='MyIFrame()'>
<INPUT type=button value="IFrame を閉じる" onClick='CloseIFrame()'>
<IFRAME
	id=RefFrame
	style='
		position:absolute;
		top:60;
		left:40;
		width:400;
		height:100;
		border-style:ridge;
		display:none;
		'
	src='MyIFrame.htm'
></IFRAME>

</BODY>

MyIFrame.htm

<SCRIPT language=JavaScript>

function CloseIFrame1() {

	parent.CloseIFrame();

}

function CloseIFrame2() {

	var objFrame = parent.document.all( "RefFrame" );
	objFrame.style.display = "none";
	parent.document.all("Field").value = "IFrame より";

}

</SCRIPT>

<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
</HEAD>
<BODY>

<INPUT type=button value="親のコードで閉じる" onClick='CloseIFrame1()'>
<INPUT type=button value="このページのコードで閉じる" onClick='CloseIFrame2()'>
<br><br>
<INPUT type=text name=Field>

</BODY>

モーダルダイアログ

function ModalDialog() {

	var Ret

	Ret = window.showModalDialog( 
		"ModalDialog.htm" , 
		window, 
		"dialogWidth:600px;dialogHeight:500px;help:no;unadorned:yes;edge:sunken"
	 )

	return Ret;
}

ダイアログ内で親ウインドウを参照できるように第２引数で window オブジェクトを引き渡しています
その受け取り方は以下のようになります

var parentWin = window.dialogArguments;

ModalDialog.htm

<SCRIPT language=JavaScript>

// **********************************************************
// 閉じるボタンで終了
// **********************************************************
function CloseDialog() {

	window.returnValue = "戻り値";
	window.close();

}

// **********************************************************
// ESC キーで終了
// ( BODY タグの onKeydown イベントより )
// **********************************************************
function EscClose() {

	if ( window.event.keyCode == 27 ) {
		window.returnValue = "ESC";
		window.close();
	}

}
</SCRIPT>

<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
</HEAD>
<BODY onKeydown='EscClose()'>

<INPUT type=button value="閉じる" onClick='CloseDialog()'><br>
親ウインドウのタイトルは<br>
<INPUT type=text name=Field size=60><br>
です

</BODY>
<SCRIPT for=window event=onload language=JavaScript>

	try {
		var parentWin = window.dialogArguments;
		document.all("Field").value = parentWin.document.title;
	}
	catch( e ) {
		document.all("Field").value = e.description;
	}

</SCRIPT>

モードレスダイアログ

<SCRIPT language=JavaScript>
var ModelessDialog = null;

function SearchString()
{
	ModelessDialog = window.showModelessDialog(
		"SearchString.htm",
		window,
		"dialogWidth:450px;dialogHeight:160px;help:no"
	)
	document.all("Action").disabled = true;
}

</SCRIPT>

SearchString.htm ( VBScript )

<SCRIPT language=VBScript>
Dim pWindow
Dim BodyTextObj,BookMark
Dim strWork

' **********************************************************
' 初回サーチ
' **********************************************************
function PageSearch()

	strWork = document.all("SearchString").value
	if strWork = "" then
		Exit Function
	end if

	document.all("SearchNext").disabled = False
	document.all("SearchBack").disabled = False

	Call BodyTextObj.moveToBookmark( BookMark )

	if document.all("SearchOption").checked then
		if BodyTextObj.findText( strWork, 0, 4 ) then
			Call BodyTextObj.select()
		end if
	else
		if BodyTextObj.findText( strWork ) then
			Call BodyTextObj.select()
		end if
	end if

end function

' **********************************************************
' 次候補サーチ
' **********************************************************
function PageSearchNext()

	strWork = document.all("SearchString").value
	if strWork = "" then
		Exit Function
	end if

	Call BodyTextObj.collapse( False )

	if document.all("SearchOption").checked then
		if BodyTextObj.findText( strWork,9999999,4 ) then
			Call BodyTextObj.select()
		end if
	else
		if BodyTextObj.findText( strWork,9999999 ) then
			Call BodyTextObj.select()
		end if
	end if

end function

' **********************************************************
' 逆サーチ
' **********************************************************
function PageSearchBack()

	strWork = document.all("SearchString").value
	if strWork = "" then
		Exit Function
	end if

	Call BodyTextObj.collapse( True )

	if document.all("SearchOption").checked then
		if BodyTextObj.findText( strWork,-9999999,4 ) then
			Call BodyTextObj.select()
		end if
	else
		if BodyTextObj.findText( strWork,-9999999 ) then
			Call BodyTextObj.select()
		end if
	end if

end function

</SCRIPT>

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<STYLE type="text/css">
	TD {
		font-family:"ＭＳ Ｐゴシック";
		font-size:12;
		border-width:1;
	}

	INPUT {
		font-family:"ＭＳ Ｐゴシック";
		font-size:12;
	}
</STYLE>
</HEAD>
<BODY>
<TABLE height=70% align=center style='position:relative;top:10;left:5'>
<TR>
	<TD nowrap>
		検索文字列
	</TD>
	<TD width=10>
	</TD>
	<TD>
		<INPUT type=text name=SearchString style='width:200'>
	</TD>
	<TD width=10>
	</TD>
	<TD>
		<INPUT
			type=button
			name=SearchFirst
			value="先頭から検索"
			style='width:80'
			onClick='Call PageSearch()'
		>
	</TD>
</TR>
<TR>
	<TD colspan=4>
	</TD>
	<TD>
		<INPUT
			type=button
			name=SearchNext
			value="次を検索"
			style='width:80'
			onClick='Call PageSearchNext()'
			disabled
		>
	</TD>
</TR>
<TR>
	<TD colspan=4>
		<TABLE><TR>
			<TD>
				<INPUT
					type=checkbox
					name=SearchOption
					style='position:relative;top:-2'
				>
			</TD>
			<TD>
			<SPAN onClick='Call document.all("SearchOption").click()'>
			大文字と小文字を区別する
			</SPAN>
			</TD>
		</TR></TABLE>
	</TD>
	<TD>
		<INPUT 
			type=button
			name=SearchBack
			value="前を検索"
			style='width:80'
			onClick='Call PageSearchBack()'
			disabled
		>
	</TD>
</TR>
</TABLE>
</BODY>
</HTML>

<SCRIPT for=window event=onload language=VBScript>

	Set pWindow = window.dialogArguments
	Call window.setTimeout("Call document.all.item(""SearchString"").focus()", 50 )

	Set BodyTextObj = pWindow.document.all.tags("BODY")(0).createTextRange()
	BookMark = BodyTextObj.getBookmark()

</SCRIPT>