ダイアログを表示するには

このページをソーシャルブックマークしてみんなに紹介する！ -->

モーダルダイアログ Modal Dialog

モーダルダイアログを表示すると、親ウィンドウは実行を停止し、ダイアログが閉じるまで入力不可の状態になります。

モードレスダイアログを表示している間も、親ウィンドウは処理を続けます。
親ウィンドウにフォーカスを移しても、ダイアログは前面に残ります。

＜スクリプト＞

<script language="JavaScript" type="text/JavaScript">
<!--
/****************************************************************
* ダイアログボックスの表示
*
* 引数： flg 1:モーダルダイアログ、0:モードレスダイアログ
* 戻り値： str
*
****************************************************************/
function showDialog(url,flg,width,height){
if(flg){
str = showModalDialog (url, "", "status:no;dialogWidth:"+width+"px; dialogHeight:"+height+"px");
}else{
str = showModelessDialog (url, "", "status:no;dialogWidth:"+width+"px; dialogHeight:"+height+"px");
}
return str;
}
//-->
</script>

＜フォーム＞

ダイアログページの例（親ウィンドウに値を渡す場合）

<html>
<body onLoad="returnValue='';">
<form onSubmit="returnValue=this.username.value; window.close(); return false;">
<p>
お名前を入力してください<br>
<input name="username">
</p>
<p>
<input type="submit" value="OK" STYLE="width: 50">
<input type="button" value="キャンセル" onClick="window.close();">
</p>
</form>
</body>
</html>

親ウィンドウの例（ダイアログから値を受け取る場合）

<html>
<body>
<h1>ダイアログ</h1>
<p id="para1" style="visibility: hidden;">
<span id="username" style="color: red; font-weight: bold"></span>
さん、ようこそ！
</p>
<script language="JavaScript">
str = showModalDialog ("dialog.html", "", "status:no;dialogWidth:320px; dialogHeight:240px");
if (str) {
username.innerText = str;
para1.style.visibility = "visible";
}
</script>
</body>
</html>

スポンサードリンク