アラートダイアログの作成

wijdialog ウィジェットでは、モーダルアラートウィンドウを簡単に作成できます。 Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/dialog/ModalAlert) にアクセスし、コントロールエクスプローラの Dialog > Alert Dialog サンプルのライブデモをご覧ください。

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

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

ソースビュー	コードのコピー
<div> <div id="dialog-message" title="アップロード完了"> <p> <span class="ui-icon ui-icon-circle-check"></span>ファイルは正常にアップロードされました！ </p> </div> </div>

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

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { // $(":wijmo-wijdialog").wijdialog("destroy").remove(); $("#dialog-message").wijdialog({ autoOpen: true, height: 180, width: 400, modal: true, buttons: { Ok: function () { $(this).wijdialog("close"); } }, captionButtons: { pin: { visible: false }, refresh: { visible: false }, toggle: { visible: false }, minimize: { visible: false }, maximize: { visible: false } } }); }); </script>

ソースビュー

コードのコピー

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            // $(":wijmo-wijdialog").wijdialog("destroy").remove();
            $("#dialog-message").wijdialog({
                autoOpen: true,
                height: 180,
                width: 400,
                modal: true,
                buttons: {
                    Ok: function () {
                        $(this).wijdialog("close");
                    }
                },
                captionButtons: {
                    pin: { visible: false },
                    refresh: { visible: false },
                    toggle: { visible: false },
                    minimize: { visible: false },
                    maximize: { visible: false }
                }
            });
        });
    </script>

アプリケーションを実行してアラートウィンドウを表示します。 <p></p> タグの間にあるテキストを変更してアラートをカスタマイズできます。アラートウィンドウは、次の図のようになるはずです。