モーダルダイアログオプションの使用

このセクションでは、wijdialog ウィジェットをモーダルダイアログウィンドウとして設定する方法を学びます。 Web サイト（ http://demo.componentone.com/ASPNET/MVCExplorer/dialog/ModalDialog）にアクセスし、コントロールエクスプローラの Dialog > Modal サンプルのライブデモをご覧ください。

ASP.NET MVC 5 Wijmo アプリケーションを作成します。
ソリューションエクスプローラで、Views → Shared フォルダを展開し、_Layout.cshtml をダブルクリックしてファイルを開きます。

以下のマークアップをページの <body> タグ内に追加します。

ソースビュー	コードのコピー
<div> <div> <input type="button" value="Show Dialog" onclick="$('#dialog-modal').wijdialog('open')" /> <div id="dialog-modal" title="モーダルダイアログ"> <p> モーダルオーバーレイ画面を追加すると、ページのコンテンツを暗くしてダイアログを目立たせることができます。</p> </div> </div> </div>

ソースビュー

コードのコピー

<div>
        <div>
        <input type="button" value="Show Dialog" onclick="$('#dialog-modal').wijdialog('open')" />
        <div id="dialog-modal" title="モーダルダイアログ">
            <p>
                モーダルオーバーレイ画面を追加すると、ページのコンテンツを暗くしてダイアログを目立たせることができます。</p>
        </div>
        </div>
  </div>

以下のスクリプトを挿入して、ウィジェットを初期化します。

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { // $(":wijmo-wijdialog").wijdialog("destroy").remove(); $("#dialog-modal").wijdialog({ autoOpen: true, height: 180, width: 400, modal: true }); }); </script>

ソースビュー

コードのコピー

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        // $(":wijmo-wijdialog").wijdialog("destroy").remove();
        $("#dialog-modal").wijdialog({
            autoOpen: true,
            height: 180,
            width: 400,
            modal: true
        });
    });
    </script>

アプリケーションを実行して、モーダルダイアログウィンドウを表示します。モーダルダイアログウィンドウは、次のような図になります。