window.showModalDialog( url )メソッド

window.showModalDialog( url )は、モーダルダイアログを出現させるメソッド。

モーダルダイアログとは、ダイアログを閉じるまでブラウザ操作をできなくするダイアログのこと。

構文

<script type="text/javascript">
window.showModalDialog( url );
</script>

<script></script>内であれば、window.は、下記のように省略可能。

<script type="text/javascript">
showModalDialog( url );
</script>

引数

url
モーダルダイアログとして表示するHTMLファイルのURLを指定。

第2引数に、モーダルダイアログに渡す引数を指定することもできる。
詳しくは、window.showModalDialog( url, arguments )メソッドのページへ。

第3引数で、モーダルダイアログのサイズなどを指定することもできる。
詳しくは、window.showModalDialog( url, arguments, options )メソッドのページへ。

戻り値

モーダルダイアログを閉じるときにwindow.returnValueプロパティに設定してある値を返す。

サンプル1


サンプル1の動作について

  1. 「モーダルダイアログを呼び出す」ボタンをクリックすると、モーダルダイアログが現れる。
    モーダルダイアログを閉じるまで、ブラウザ上の他の操作はできない。
  2. モーダルダイアログを閉じると、「モーダルダイアログを呼び出す」ボタンの下に、「戻り値:モーダルダイアログより」と表示する。

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>

HTML

<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>

サンプル2


サンプル2の動作について

  1. 「モーダルダイアログを呼び出す」ボタンをクリックすると、モーダルダイアログが現れる。
    モーダルダイアログを閉じるまで、ブラウザ上の他の操作はできない。
  2. モーダルダイアログを閉じると、「モーダルダイアログを呼び出す」ボタンの下に、「戻り値:モーダルダイアログより」と表示する。

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>

HTML

<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>

スポンサード リンク

カテゴリー: JavaScript, Windowオブジェクト, ダイアログ, ブラウザオブジェクト, メソッド, リファレンス パーマリンク