Popup

Popup

Overview

Popups may have owner elements that can be used to control their visibility.

Features

Overview

Popup Dialog

Popup Position

Sample SourceDocumentation

Popovers (Popups with owner elements)

Customize Trigger

Please select the Trigger properties, to change whenever the Popup will show or hidden.

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.

IndexController.cs Index.cshtml

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

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Document >

Scheduling >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Document

Scheduling

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

Overview

Features

Settings

Description