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):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | // 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); }); }) }}); |
1 2 3 4 5 6 7 8 9 10 11 12 | // This file locates: "Content/css/Lesson/C1Input/Dialogs.css"..modal-body { min-width: 300px;}input:invalid { border-color: red;}label{ padding:0px;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc;namespace LearnMvcClient.Controllers{ public partial class C1InputController : Controller { // GET: Dialogs public ActionResult Dialogs() { return View(); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | <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">×</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">×</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">×</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") |