Dialogs

Dialogs are Popup controls without owner elements. They allow users to enter or edit information without switching to a new page or view. They can be modal or modeless, and are usually centered on the screen.

Dialogs are displayed using the show method, which has optional arguments to define whether the dialog should be modal or modeless, and a callback function invoked when the dialog is closed.

Dialogs are dismissed when the user presses the Escape key oe when the dialog loses focus. They are also dismissed when the user clicks an element with a class that starts with "wj-hide" (e.g. "wj-hide", "wj-hide-ok", or "wj-hide-cancel"). In the latter case, the class name is assigned to the dialog's dialogResult property, and can be used by the callback function or by the hidden event handler to decide how to process the dialog's content.

This demo demonstrates this by defining three dialogs that simulate a user authorization UI. Notice how the dialogs provide HTML5-style validation and the ability to invoke a dialog from another (you can invoke the create account dialog from within the log-in dialog):

// This file locates: "Scripts/Lesson/C1Input/Dialogs.js".
c1.documentReady(function () {
    var frmLogin = wijmo.Control.getControl('#frmLogin');
    var frmCreateAccount = wijmo.Control.getControl('#frmCreateAccount');
    var frmEditAccount = wijmo.Control.getControl('#frmEditAccount');
 
    // show forms
    document.getElementById('btnLogin').addEventListener('click', function () {
        frmLogin.show(true, function (sender) {
            switch (sender.dialogResult) {
                case 'submit':
                    alert('form submitted');
                    break;
                case 'wj-hide-create':
                    btnCreateAccount.click(); // open the Create Account form
                    break;
            }
        });
    });
    document.getElementById('btnCreateAccount').addEventListener('click', function () {
        frmCreateAccount.show(true, function (sender) {
            if (sender.dialogResult == 'submit') {
                alert('form submitted');
            }
        });
    });
    document.getElementById('btnEditAccount').addEventListener('click', function () {
        frmEditAccount.show(true, function (sender) {
            if (sender.dialogResult == 'submit') {
                alert('form submitted');
            }
        });
    });
 
    // validate the form but don't submit
    document.body.addEventListener('submit', function (e) {
        e.preventDefault(); // don't submit
        if (e.target.checkValidity()) {
            var dlg = wijmo.Control.getControl(e.target);
            dlg.hide('submit'); // close the dialog passing a dialogResult
        }
    });
 
    // validate password/new password confirmation
    ensureSameValue('password', 'confirm');
    ensureSameValue('newPassword', 'newConfirm');
    function ensureSameValue(f1, f2) {
        var inputs = [document.getElementById(f1), document.getElementById(f2)];
        inputs.forEach(function (input) {
            input.addEventListener('input', function (e) {
                var err = inputs[0].value != inputs[1].value ? 'Passwords don\'t match.' : '';
                inputs[1].setCustomValidity(err);
            });
        })
    }
});

// This file locates: "Content/css/Lesson/C1Input/Dialogs.css".
.modal-body {
  min-width: 300px;
}
 
input:invalid {
  border-color: red;
}
 
label{
    padding:0px;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: Dialogs
        public ActionResult Dialogs()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Input.Dialogs_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Input.Dialogs_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.Dialogs_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Input.Dialogs_Text3)
</p>
<p>
    @Html.Raw(Resources.C1Input.Dialogs_Text4)
</p>
 
<button id="btnLogin" class="btn btn-primary">
    @Html.Raw(Resources.C1Input.Dialogs_Text5)
</button>
 
<button id="btnCreateAccount" class="btn btn-primary">
    @Html.Raw(Resources.C1Input.Dialogs_Text6)
</button>
 
<button id="btnEditAccount" class="btn btn-primary">
    @Html.Raw(Resources.C1Input.Dialogs_Text7)
</button>
 
<!-- Log In form -->
<form id="frmLogin">
    <h4 class="modal-header">
        @Html.Raw(Resources.C1Input.Dialogs_Text5)
        <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
    </h4>
    <div class="modal-body">
        <label>
            @Html.Raw(Resources.C1Input.Dialogs_Text8)
            <input class="form-control" required type="email" />
        </label>
        <label>
            @Html.Raw(Resources.C1Input.Dialogs_Text9)
            <input class="form-control" type="password" required pattern=".{4,}" title="@string.Format(Resources.C1Input.Dialogs_Text19, 4)" />
        </label>
        <label>
            @Html.Raw(Resources.C1Input.Dialogs_Text10)
            <input type="checkbox" />
        </label>
        <a href="" class="wj-hide-create">@Html.Raw(Resources.C1Input.Dialogs_Text11)</a>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="submit">
            @Html.Raw(Resources.C1Input.Dialogs_Text5)
        </button>
    </div>
</form>
 
<!-- Create Account form -->
<form id="frmCreateAccount">
    <h4 class="modal-header">
        @Html.Raw(Resources.C1Input.Dialogs_Text6)
        <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
    </h4>
    <div class="modal-body">
        <label>
            @Html.Raw(Resources.C1Input.Dialogs_Text12)
            <input id="name" class="form-control" required pattern=".{2,}" title="@string.Format(Resources.C1Input.Dialogs_Text19, 2)" />
        </label>
        <label>
            @Html.Raw(Resources.C1Input.Dialogs_Text8)
            <input id="email" class="form-control" type="email" required />
        </label>
        <label>
            @Html.Raw(Resources.C1Input.Dialogs_Text9)
            <input id="password" class="form-control" type="password" required pattern=".{4,}" title="@string.Format(Resources.C1Input.Dialogs_Text19, 4)" />
        </label>
        <label>
            @Html.Raw(Resources.C1Input.Dialogs_Text13)
            <input id="confirm" class="form-control" type="password" />
        </label>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="submit">
            @Html.Raw(Resources.C1Input.Dialogs_Text6)
        </button>
    </div>
</form>
 
<!-- Edit Account form -->
<form id="frmEditAccount">
    <h4 class="modal-header">
        @Html.Raw(Resources.C1Input.Dialogs_Text7)
        <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
    </h4>
    <div class="modal-body">
        <label>
            @Html.Raw(Resources.C1Input.Dialogs_Text8)
            <input id="email" class="form-control" required type="email" />
        </label>
        <label>
            @Html.Raw(Resources.C1Input.Dialogs_Text14)
            <input id="password" class="form-control" type="password" required pattern=".{4,}" title="@string.Format(Resources.C1Input.Dialogs_Text19, 4)" />
        </label>
        <label>
            @Html.Raw(Resources.C1Input.Dialogs_Text15)
            <input id="newName" class="form-control" required pattern=".{2,}" title="@string.Format(Resources.C1Input.Dialogs_Text19, 2)" />
        </label>
        <label>
            @Html.Raw(Resources.C1Input.Dialogs_Text16)
            <input id="newPassword" class="form-control" type="password" required pattern=".{4,}" title="@string.Format(Resources.C1Input.Dialogs_Text19, 4)" />
        </label>
        <label>
            @Html.Raw(Resources.C1Input.Dialogs_Text17)
            <input id="newConfirm" class="form-control" type="password" />
        </label>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="submit">
            @Html.Raw(Resources.C1Input.Dialogs_Text18)
        </button>
    </div>
</form>
 
@Html.C1().Popup("#frmLogin")
@Html.C1().Popup("#frmCreateAccount")
@Html.C1().Popup("#frmEditAccount")

Dialogs

Log In ×

Create Account ×

Edit Account ×

Log In

Create Account

Edit Account