window.showModalDialog( url, arguments )は、モーダルダイアログを出現させるメソッド。第２引数「arguments」で、モーダルダイアログに渡す引数を指定できる。
構文
<script type="text/javascript">
window.showModalDialog( url, arguments );
</script>
window.showModalDialog( url, arguments );
</script>
<script>～</script>内であれば、window.は、下記のように省略可能。
<script type="text/javascript">
showModalDialog( url, arguments );
</script>
showModalDialog( url, arguments );
</script>
引数
- url
- モーダルダイアログとして表示するHTMLファイルのURLを指定。
- arguments
- モーダルダイアログに渡す引数。
- モーダルダイアログ内で、window.dialogArgumentsプロパティを使い取得できる。
第３引数で、モーダルダイアログのサイズなどを指定することもできる。
詳しくは、window.showModalDialog( url, arguments, options )メソッドのページへ。
戻り値
モーダルダイアログを閉じるときにwindow.returnValueプロパティに設定してある値を返す。
サンプル１
サンプル１の動作について
-
「モーダルダイアログを呼び出す」ボタンをクリックすると、モーダルダイアログが現れる。
モーダルダイアログを閉じるまで、ブラウザ上の他の操作はできない。 - モーダルダイアログを閉じると、「モーダルダイアログを呼び出す」ボタンの下に、「戻り値：モーダルダイアログより」と表示する。
JavaScript
<script type="text/javascript">
window.onload = initialize;
function initialize() {
document.getElementById( 'sampleModalDialog' ).onclick=sampleModalDialog;
}
function sampleModalDialog() {
var $arguments = new Array( "引数１", "引数２" );
var $returnValueA = showModalDialog(
"http://alphasis.info/wp-content/uploads/2013/06/javascript-windowObject-showModalDialog-url-arguments-options-dialog-arguments.html",
$arguments
);
document.getElementById( "sampleOutputA" ).innerHTML = "戻り値：" + $returnValueA;
}
</script>
window.onload = initialize;
function initialize() {
document.getElementById( 'sampleModalDialog' ).onclick=sampleModalDialog;
}
function sampleModalDialog() {
var $arguments = new Array( "引数１", "引数２" );
var $returnValueA = showModalDialog(
"http://alphasis.info/wp-content/uploads/2013/06/javascript-windowObject-showModalDialog-url-arguments-options-dialog-arguments.html",
$arguments
);
document.getElementById( "sampleOutputA" ).innerHTML = "戻り値：" + $returnValueA;
}
</script>
HTML
<p>
<button id="sampleModalDialog">モーダルダイアログを呼び出す</button>
<br />
<spna id="sampleOutputA"></span>
</p>
<button id="sampleModalDialog">モーダルダイアログを呼び出す</button>
<br />
<spna id="sampleOutputA"></span>
</p>
モーダルダイアログのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<title>モーダルダイアログ</title>
</head>
<body>
<h1>モーダルダイアログ</h1>
<p>
モーダルダイアログを閉じるまで、他のブラウザ操作はできない。
</p>
<h1>引数</h1>
<p>
<script type="text/javascript">
document.write( 'window.dialogArguments[0]：' + window.dialogArguments[0] + '<br /><br />' );
document.write( 'dialogArguments[1]：' + window.dialogArguments[1] );
window.returnValue = "モーダルダイアログより";
</script>
</p>
</body>
</html>
<html lang="ja">
<head>
<title>モーダルダイアログ</title>
</head>
<body>
<h1>モーダルダイアログ</h1>
<p>
モーダルダイアログを閉じるまで、他のブラウザ操作はできない。
</p>
<h1>引数</h1>
<p>
<script type="text/javascript">
document.write( 'window.dialogArguments[0]：' + window.dialogArguments[0] + '<br /><br />' );
document.write( 'dialogArguments[1]：' + window.dialogArguments[1] );
window.returnValue = "モーダルダイアログより";
</script>
</p>
</body>
</html>
サンプル２
サンプル２の動作について
-
「モーダルダイアログを呼び出す」ボタンをクリックすると、モーダルダイアログが現れる。
モーダルダイアログを閉じるまで、ブラウザ上の他の操作はできない。 - モーダルダイアログを閉じると、「モーダルダイアログを呼び出す」ボタンの下に、「戻り値：モーダルダイアログより」と表示する。
JavaScript
<script type="text/javascript">
function sampleConfirmB() {
var $arguments = new Array( "引数１", "引数２" );
var $returnValueB = showModalDialog(
"http://alphasis.info/wp-content/uploads/2013/06/javascript-windowObject-showModalDialog-url-arguments-options-dialog-arguments.html",
$arguments
);
document.getElementById( "sampleOutputB" ).innerHTML = "戻り値：" + $returnValueB;
}
</script>
function sampleConfirmB() {
var $arguments = new Array( "引数１", "引数２" );
var $returnValueB = showModalDialog(
"http://alphasis.info/wp-content/uploads/2013/06/javascript-windowObject-showModalDialog-url-arguments-options-dialog-arguments.html",
$arguments
);
document.getElementById( "sampleOutputB" ).innerHTML = "戻り値：" + $returnValueB;
}
</script>
HTML
<p>
<button onclick="sampleConfirmB()">モーダルダイアログを呼び出す</button>
<br />
<spna id="sampleOutputB"></span>
</p>
<button onclick="sampleConfirmB()">モーダルダイアログを呼び出す</button>
<br />
<spna id="sampleOutputB"></span>
</p>
モーダルダイアログのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<title>モーダルダイアログ</title>
</head>
<body>
<h1>モーダルダイアログ</h1>
<p>
モーダルダイアログを閉じるまで、他のブラウザ操作はできない。
</p>
<h1>引数</h1>
<p>
<script type="text/javascript">
document.write( 'window.dialogArguments[0]：' + window.dialogArguments[0] + '<br /><br />' );
document.write( 'dialogArguments[1]：' + window.dialogArguments[1] );
window.returnValue = "モーダルダイアログより";
</script>
</p>
</body>
</html>
<html lang="ja">
<head>
<title>モーダルダイアログ</title>
</head>
<body>
<h1>モーダルダイアログ</h1>
<p>
モーダルダイアログを閉じるまで、他のブラウザ操作はできない。
</p>
<h1>引数</h1>
<p>
<script type="text/javascript">
document.write( 'window.dialogArguments[0]：' + window.dialogArguments[0] + '<br /><br />' );
document.write( 'dialogArguments[1]：' + window.dialogArguments[1] );
window.returnValue = "モーダルダイアログより";
</script>
</p>
</body>
</html>