Popup
Popup Dialog
Features
Sample
Description
Dialogs are Popups with no owner element. They must be shown by calling the show method.
Dialogs can be modal or modeless. Modal dialogs have a dark backdrop, and if their hide-trigger attribute is set to None, they cannot lose focus and must be dismissed by the user, either by pressing escape or by clicking an element on the dialog itself.
Dialogs can be modal or modeless. Modal dialogs have a dark backdrop, and if their hide-trigger attribute is set to None, they cannot lose focus and must be dismissed by the user, either by pressing escape or by clicking an element on the dialog itself.
Source
PopupDialogController.cs
using Microsoft.AspNetCore.Mvc; using System; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class PopupController : Controller { public ActionResult PopupDialog() { return View(); } } }
PopupDialog.cshtml
@section Styles{ <style> .modal-body label { padding: 0px; } </style> } @section Scripts{ <script> var popups, modal = true; function showPopup(name) { var popup, inputs; if (!popups) { popups = {}; popups["login"] = wijmo.Control.getControl("#popupLogin"); popups["create"] = wijmo.Control.getControl("#popupCreate"); popups["edit"] = wijmo.Control.getControl("#popupEdit"); popups["custom"] = wijmo.Control.getControl("#popupCustom"); } popup = popups[name]; if (popup) { inputs = popup.hostElement.querySelectorAll('input'); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type != 'checkbox') { inputs[i].value = ''; } } popup.modal = modal; if (name == 'custom') { popup.show(modal, function (sender) { if (sender.dialogResult == sender.dialogResultSubmit) { var customInput = document.getElementById("customInput"); alert('@Html.Raw(PopupRes.PopupDialog_ResultSubmit) "' + sender.dialogResultSubmit + '", "' + customInput.value + '".'); } }); } else { popup.show(); } } } function check(pwd1, pwd2) { if (pwd1.value !== pwd2.value) { pwd2.setCustomValidity("Passwords don't match."); } else { pwd2.setCustomValidity(""); } } function checkCreate() { var pwd1 = document.getElementById("createPwd1"), pwd2 = document.getElementById("createPwd2"); check(pwd1, pwd2); } function checkEdit() { var pwd1 = document.getElementById("editPwd1"), pwd2 = document.getElementById("editPwd2"); check(pwd1, pwd2); } function changeModal() { modal = wijmo.getElement("#modal").checked; } //The first input element will get focus after dialog shown. function autoFocus(control) { control.hostElement.querySelector("input").focus(); } function hideDialog(evt, msg) { // hide dialog for (var e = evt.target; e; e = e.parentElement) { if (wijmo.hasClass(e, 'wj-popup')) { var dlg = wijmo.Control.getControl(e); dlg.hide(); } } // show alert alert(msg); } </script> } <label>@Html.Raw(PopupRes.PopupDialog_Text0)</label><br /> <!-- The login popup dialog --> <c1-popup class="modal-content col-md-6" style="display:none;" id="popupLogin" hide-trigger="None" shown="autoFocus"> <form> <h4 class="modal-header"> @Html.Raw(PopupRes.PopupDialog_LogIn) <button type="button" tabindex="-1" class="close wj-hide">×</button> </h4> <div class="modal-body"> <label> @Html.Raw(PopupRes.PopupDialog_Email) <input class="form-control" required="" type="email"> </label> <br> <label> @Html.Raw(PopupRes.PopupDialog_Password) <input class="form-control" type="password" required="" pattern=".{4,}" title="@(PopupRes.PopupDialog_Title4)"> </label> <br> <label> @Html.Raw(PopupRes.PopupDialog_RememberMe) <input type="checkbox"> </label> <br> <a href="#" class="wj-hide" onclick="showPopup('create')">@Html.Raw(PopupRes.PopupDialog_Text1)</a> </div> <div class="modal-footer"> <div style="float:left"> <img src="~/Content/css/images/icons/30/facebook.png" title="@(PopupRes.PopupDialog_Text2)" onclick="hideDialog(event, '@(PopupRes.PopupDialog_Text3)')"> <img src="~/Content/css/images/icons/30/google.png" title="@Html.Raw(PopupRes.PopupDialog_Text4)" onclick="hideDialog(event, '@Html.Raw(PopupRes.PopupDialog_Text5)')"> </div> <button class="btn btn-primary" type="submit"> @Html.Raw(PopupRes.PopupDialog_LogIn) </button> </div> </form> </c1-popup> <!-- The content of popup dialog to create account. --> <c1-popup class="modal-content col-md-6" style="display:none;" id="popupCreate" hide-trigger="None" shown="autoFocus"> <form> <h4 class="modal-header"> @Html.Raw(PopupRes.PopupDialog_CreateAccount) <button type="button" tabindex="-1" class="close wj-hide">×</button> </h4> <div class="modal-body"> <label> @Html.Raw(PopupRes.PopupDialog_Name) <input class="form-control" required="" pattern=".{2,}" title="@(PopupRes.PopupDialog_Title2)"> </label> <br> <label> @Html.Raw(PopupRes.PopupDialog_Email) <input class="form-control" required="" type="email"> </label> <br> <label> @Html.Raw(PopupRes.PopupDialog_Password) <input class="form-control" type="password" id="createPwd1" required="" pattern=".{4,}" title="@(PopupRes.PopupDialog_Title4)"> </label> <br> <label> @Html.Raw(PopupRes.PopupDialog_ConfirmPassword) <input class="form-control " type="password" id="createPwd2" required="" pattern=".{4,}" title="@(PopupRes.PopupDialog_Title4)"> </label> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit" onclick="checkCreate()"> @Html.Raw(PopupRes.PopupDialog_CreateAccount) </button> </div> </form> </c1-popup> <c1-popup class="modal-content col-md-6" style="display:none;" id="popupEdit" hide-trigger="None" shown="autoFocus"> <form> <h4 class="modal-header"> @Html.Raw(PopupRes.PopupDialog_EditAccount) <button type="button" tabindex="-1" class="close wj-hide">×</button> </h4> <div class="modal-body"> <label> @Html.Raw(PopupRes.PopupDialog_Email) <input class="form-control" required="" type="email"> </label> <br> <label> @Html.Raw(PopupRes.PopupDialog_CurrentPassword) <input class="form-control" type="password" required="" pattern=".{4,}" title="@(PopupRes.PopupDialog_Title4)"> </label> <br> <label> @Html.Raw(PopupRes.PopupDialog_NewName) <input class="form-control" pattern=".{2,}" title="@(PopupRes.PopupDialog_Title2)"> </label> <br> <label> @Html.Raw(PopupRes.PopupDialog_NewPassword) <input class="form-control" type="password" id="editPwd1" pattern=".{4,}" title="@(PopupRes.PopupDialog_Title4)"> </label> <br> <label> @Html.Raw(PopupRes.PopupDialog_ConfirmNewPassword) <input class="form-control" type="password" id="editPwd2" pattern=".{4,}" title="@(PopupRes.PopupDialog_Title4)"> </label> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit" onclick="checkEdit()"> @Html.Raw(PopupRes.PopupDialog_UpdateAccount) </button> </div> </form> </c1-popup> <form id="popupCustom"> <h4 class="modal-header"> @Html.Raw(PopupRes.PopupDialog_Title5) <button type="button" tabindex="-1" class="close wj-hide">×</button> </h4> <div class="modal-body"> <label> @Html.Raw(PopupRes.PopupDialog_CustomInput) <input id="customInput" class="form-control" type="text"> </label> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> OK </button> </div> </form> <c1-popup class="modal-content col-md-6" style="display:none;" id="popupCustom" hide-trigger="None" shown="autoFocus" dialog-result-submit="OK"></c1-popup> <button class="btn btn-default" onclick="showPopup('login')">@Html.Raw(PopupRes.PopupDialog_LogIn)</button> <button class="btn btn-default" onclick="showPopup('create')">@Html.Raw(PopupRes.PopupDialog_CreateAccount)</button> <button class="btn btn-default" onclick="showPopup('edit')">@Html.Raw(PopupRes.PopupDialog_EditAccount)</button> <button class="btn btn-default" onclick="showPopup('custom')">@Html.Raw(PopupRes.PopupDialog_Custom)</button><br /> <label>Modal <input type="checkbox" id="modal" checked="checked" onchange="changeModal()" /></label> @section Description{ @Html.Raw(PopupRes.PopupDialog_Text6) }
Documentation