Popup
Overview
Features
Customize Trigger
Please select the Trigger properties, to change whenever the Popup will show or hidden.
Title
This is a multiline message!
Title
This is a multiline message!
Title
Title
- onDragging
- onDragged
- onPositionChanging
- onPositionChanged
- onResizing
- onResized
- onSizeChanging
- onSizeChanged
Title
This is a multiline message!
Settings
Description
Popups may have owner elements that can be used to control their visibility. The show-trigger and hide-trigger attributes determine whether the Popups should be shown or hidden when the owner element is clicked or when the popup loses the focus.
IsResizable: Gets or sets a value that determines whether the popup can be resized by dragging its edges with the mouse.
IsDraggable: Gets or sets a value that determines whether the popup can be dragged with the mouse by its header. The header is identified by the '.wj-dialog-header' or '.modal-header' CSS selectors. If the dialog does not contain any elements with the 'wj-dialog-header'or 'modal-header' classes, users will not be able to drag the popup.
OnClientDragged: Gets or sets the client function which occurs after the Popup has been dragged.
OnClientDragging: Gets or sets the client function which occurs when the Popup is about to be dragged.
OnClientPositionChanged: Gets or sets the client function which occurs while the user moves the Popup, between the Dragging and Dragged events, after the PositionChanging event.
OnClientPositionChanging: Gets or sets the client function which occurs while the user moves the Popup, between the Dragging and Dragged events.
OnClientResized: Gets or sets the client function which occurs after the Popup has been resized.
OnClientResizing: Gets or sets the client function which occurs when the Popup is about to be resized.
OnClientSizeChanged: Gets or sets the client function which occurs while the user resizes the Popup, between the resizing and resized events, after the SizeChanging event.
OnClientSizeChanging: Gets or sets the client function which occurs while the user resizes the Popup, between the resizing and resized events.
using Microsoft.AspNetCore.Mvc; using System; using MvcExplorer.Models; using System.Collections.Generic; using C1.Web.Mvc; using System.Linq; namespace MvcExplorer.Controllers { public partial class PopupController : Controller { public ActionResult Index() { var settings = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"ShowTrigger", Enum.GetValues(typeof(PopupTrigger)).Cast<object>().ToArray()}, {"HideTrigger", Enum.GetValues(typeof(PopupTrigger)).Cast<object>().ToArray()} } }; settings.LoadRequestData(Request); ViewBag.DemoSettingsModel = settings; return View(); } } }
@{ ViewBag.DemoSettings = true; ClientSettingsModel settings = ViewBag.DemoSettingsModel; } @section Styles{ <style> .btn { height: auto; } .popover { display: block; } .tab-content > .tab-pane { display: block; } </style> } <label>@Html.Raw(PopupRes.Index_Text2)</label> <!-- The popup owners. --> <button id="btn1" type="button" class="btn btn-default"> @Html.Raw(PopupRes.Index_ClickToShowPopupForm) <br> <small>@Html.Raw(PopupRes.Index_Description1)</small> </button> <button id="btn2" type="button" class="btn btn-default"> @Html.Raw(PopupRes.Index_ClickToShowPopupForm) <br> <small>@Html.Raw(PopupRes.Index_Description2)</small> </button> <button id="btn3" type="button" class="btn btn-default"> @Html.Raw(PopupRes.Index_ClickToShowPopupForm) <br> <small>(@Html.Raw(PopupRes.Index_Description3)</small> </button> <button id="eventPopupBtn" type="button" class="btn btn-default"> @Html.Raw(PopupRes.Index_ClickToShowPopupWithEvents) <br> <small>(ShowTrigger=Click, HideTrigger=Click, IsResizable=True, IsDraggable=True)</small> </button> <br /> <br /> <strong style="color:red">@Html.Raw(PopupRes.Index_Title4)</strong> <br /> <p style="color:red">@Html.Raw(PopupRes.Index_Description5)</p> <button id="btn4" type="button" class="btn btn-default"> <small>(@Html.Raw(PopupRes.Index_Description4)</small> </button> <br /> <br /> <br /> <c1-popup class="popover" style="display:none;" id="popup1" owner="#btn1" hide-trigger="Click" is-resizable="true"> <h3 class="popover-title"> @Html.Raw(PopupRes.Index_Title) </h3> <div class="popover-content"> @Html.Raw(PopupRes.Index_Text0) </div> </c1-popup> <c1-popup class="popover" style="display:none;" id="popup2" owner="#btn2" hide-trigger="Blur"> <h3 class="popover-title"> @Html.Raw(PopupRes.Index_Title) </h3> <div class="popover-content"> @Html.Raw(PopupRes.Index_Text0) </div> </c1-popup> <c1-popup class="popover" style="display:none;" id="popup3" owner="#btn3" hide-trigger="None"> <h3 class="popover-title"> @Html.Raw(PopupRes.Index_Title) </h3> <div class="popover-content "> <form name="popoverForm"> <p>@Html.Raw(PopupRes.Index_Text0)</p> <pre>2 + 3 = <span class="">5</span></pre> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">@@</div> <input class="form-control" type="email" placeholder="@PopupRes.Index_EnterEmail"> </div> </div> <div class="form-actions"> <button type="button" class="btn btn-danger wj-hide">@Html.Raw(PopupRes.Index_Close)</button> <button type="button" class="btn btn-primary wj-hide">@Html.Raw(PopupRes.Index_SaveChanges)</button> </div> </form> </div> </c1-popup> <c1-popup class="popover" style="display:none;" id="eventPopup" owner="#eventPopupBtn" show-trigger="Click" hide-trigger="Click" is-resizable="true" is-draggable="true" dragging="onDragging" dragged="onDragged" position-changing="onPositionChanging" position-changed="onPositionChanged" resizing="onResizing" resized="onResized" size-changing="onSizeChanging" size-changed="onSizeChanged"> <h3 class="wj-dialog-header" style="margin:0"> @Html.Raw(PopupRes.Index_Title) </h3> <div class="popover-content"> <div class="container"> <ul> <li>onDragging</li> <li>onDragged</li> <li>onPositionChanging</li> <li>onPositionChanged</li> <li>onResizing</li> <li>onResized</li> <li>onSizeChanging</li> <li>onSizeChanged</li> </ul> </div> </div> </c1-popup> <c1-popup class="popover" style="display:none;" id="popup4" owner="#btn4" show-trigger="None" hide-trigger="None"> <h3 class="popover-title"> @Html.Raw(PopupRes.Index_Title) </h3> <div class="popover-content"> @Html.Raw(PopupRes.Index_Text0) </div> </c1-popup> @section Scripts{ <script> function setProperty(property, value) { var control = wijmo.Control.getControl('#popup4'); if (control) { control[property] = value; } } function customChangeShowTrigger(popup, value) { setProperty('showTrigger', value); } function customChangeHideTrigger(popup, value) { setProperty('hideTrigger', value); } //events function onDragging() { console.log("onDragging!!!") } function onDragged() { console.log("onDragged!!!") } function onPositionChanging() { console.log("onPositionChanging!!!") } function onPositionChanged() { console.log("onPositionChanged!!!") } function onResizing() { console.log("onResizing!!!") } function onResized() { console.log("onResized!!!") } function onSizeChanging() { console.log("onSizeChanging!!!") } function onSizeChanged() { console.log("onSizeChanged!!!") } </script> } @section Description{ <p>@Html.Raw(PopupRes.Index_Text1)</p> <p>@Html.Raw(PopupRes.Index_Text3)</p> <p>@Html.Raw(PopupRes.Index_IsDraggable_Description)</p> <p> @Html.Raw(PopupRes.Index_OnClientDragged_Description) <br />@Html.Raw(PopupRes.Index_OnClientDragging_Description) <br />@Html.Raw(PopupRes.Index_OnClientPositionChanged_Description) <br />@Html.Raw(PopupRes.Index_OnClientPositionChanging_Description) <br />@Html.Raw(PopupRes.Index_OnClientResized_Description) <br />@Html.Raw(PopupRes.Index_OnClientResizing_Description) <br />@Html.Raw(PopupRes.Index_OnClientSizeChanged_Description) <br />@Html.Raw(PopupRes.Index_OnClientSizeChanging_Description) </p> }