window.showModalDialog( url, arguments, options )メソッド

window.showModalDialog( url, arguments, options )は、モーダルダイアログを出現させるメソッド。第3引数「options」で、モーダルダイアログのサイズなどを指定できる。

window.showModalDialog( url, arguments, options )メソッドは、2013年6月25日現在、ブラウザにより対応状況が異なる。特に、第3引数「options」で指定する表示オプションは、IE9以外のブラウザでは未対応なものも多くある。

構文

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

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

<script type="text/javascript">
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プロパティに設定してある値を返す。

サンプル1


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

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

JavaScript

<script type="text/javascript">
window.onload = initialize;
function initialize() {
    document.getElementById( 'sampleModalDialog' ).onclick=sampleModalDialog;
}
function sampleModalDialog() {
    var $arguments = new Array( "引数1", "引数2" );
    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>

モーダルダイアログの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>

サンプル2


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

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

JavaScript

<script type="text/javascript">
function sampleConfirmB() {
    var $arguments = new Array( "引数1", "引数2" );
    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>

モーダルダイアログの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>

スポンサード リンク

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