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