Use the Modal Dialog

The wijdialog widget can be used as a Modal dialog window. This is especially useful if you need to communicate information users must have before they continue with the next step. In this topic, you will learn how to set the widget as a Modal Dialog Window. You can also learn how to Create an Alert Dialog, and how to Create a Confirm Dialog.

See the Dialog > Modal sample of the Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/dialog/ModalDialog

Create an ASP.NET MVC 5 Wijmo application.
In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.

Add the following markup within the <body> tags of the page.

<div>
        <div>
        <input type="button" value="Show Dialog" onclick="$('#dialog-modal').wijdialog('open')" />
        <div id="dialog-modal" title="Basic modal dialog">
            <p>
                Modal Dialog Windows make the rest of the screen dim until you close the Modal window.</p>
        </div>
        </div>
  </div>

Insert the following script to initialize the widget:

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

Run the application to view the Modal Dialog Window. It should look like the following image: