window.showModalDialog( url, arguments, options )は、モーダルダイアログを出現させるメソッド。第３引数「options」で、モーダルダイアログのサイズなどを指定できる。
window.showModalDialog( url, arguments, options )メソッドは、2013年6月25日現在、ブラウザにより対応状況が異なる。特に、第３引数「options」で指定する表示オプションは、IE9以外のブラウザでは未対応なものも多くある。
構文
<script type="text/javascript">
window.showModalDialog( url, arguments, options );
</script>
window.showModalDialog( url, arguments, options );
</script>
<script>～</script>内であれば、window.は、下記のように省略可能。
<script type="text/javascript">
showModalDialog( url, arguments, options );
</script>
showModalDialog( url, arguments, options );
</script>
引数
- url
- モーダルダイアログとして表示するHTMLファイルのURLを指定。
- arguments
- モーダルダイアログに渡す引数。
- モーダルダイアログ内で、window.dialogArgumentsプロパティを使い取得できる。
- options
- モーダルダイアログ表示オプション。サイズや位置などを指定できる。2013年6月25日現在、ブラウザにより対応状況が異なるので注意が必要だ。
- dialogHeight
- モーダルダイアログの高さを指定できる。
- 2013年6月25日、IE9、Firefox、GoogleChromeの最新版にて動作確認。
- dialogWidth
- モーダルダイアログの幅を指定できる。
- 2013年6月25日、IE9、Firefox、GoogleChromeの最新版にて動作確認。
- dialogLeft
- モーダルダイアログの水平方向の位置を、画面の左端からの距離で指定できる。
- 2013年6月25日、IE9、Firefox、GoogleChromeの最新版にて動作確認。
- dialogTop
- モーダルダイアログの垂直方向の位置を、画面の上端からの距離で指定できる。
- 2013年6月25日、IE9、Firefox、GoogleChromeの最新版にて動作確認。
- center
- モーダルダイアログを画面の中央に配置するかどうか。
- 「on」「yes」「1」の何れかを指定すると、モーダルダイアログを画面の中央に配置する。
- 初期設定値は「yes」。
- 2013年6月25日、IE9、GoogleChromeの最新版にて動作確認。
- resizable
- モーダルダイアログのサイズの変更を許可するかどうか。
- 「on」「yes」「1」の何れかを指定すると、モーダルダイアログのサイズを、ユーザーが変更できる。
- 初期設定値は「no」。
- 2013年6月25日、IE9にて動作確認。
- scroll
- モーダルダイアログのスクロールバーを表示するかどうか。
- 「on」「yes」「1」の何れかを指定すると、モーダルダイアログのサイズを、ユーザーが変更できる。
- 初期設定値は「no」。
- 2013年6月25日、IE9にて動作確認。
戻り値
モーダルダイアログを閉じるときにwindow.returnValueプロパティに設定してある値を返す。
サンプル１
サンプル１の動作について
-
「モーダルダイアログを呼び出す」ボタンをクリックすると、縦横300pxのモーダルダイアログが現れる。
モーダルダイアログを閉じるまで、ブラウザ上の他の操作はできない。 - モーダルダイアログを閉じると、「モーダルダイアログを呼び出す」ボタンの下に、「戻り値：モーダルダイアログより」と表示する。
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,
"dialogHeight: 300px; dialogWidth: 300px; dialogLeft: 100px; dialogTop: 100px;"
);
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,
"dialogHeight: 300px; dialogWidth: 300px; dialogLeft: 100px; dialogTop: 100px;"
);
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>
サンプル２
サンプル２の動作について
-
「モーダルダイアログを呼び出す」ボタンをクリックすると、縦横300pxのモーダルダイアログが現れる。
モーダルダイアログを閉じるまで、ブラウザ上の他の操作はできない。 - モーダルダイアログを閉じると、「モーダルダイアログを呼び出す」ボタンの下に、「戻り値：モーダルダイアログより」と表示する。
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,
"dialogHeight: 300px; dialogWidth: 300px; dialogLeft: 100px; dialogTop: 100px;"
);
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,
"dialogHeight: 300px; dialogWidth: 300px; dialogLeft: 100px; dialogTop: 100px;"
);
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>