Popup
Popup Position
Features
Sample
Title
Hello Popup
This is a multi-line message!
This is a multi-line message!
Settings
Description
Change Popup position to set where the popup should be displayed with respect to the owner element.
Source
PopupPositionController.cs
using C1.Web.Mvc; using MvcExplorer.Models; using System; using System.Collections; using System.Collections.Generic; using System.Globalization; using System.Linq; using System.Web.Mvc; namespace MvcExplorer.Controllers { public partial class PopupController : Controller { private readonly ControlOptions _gridDataModel = new ControlOptions { Options = new OptionDictionary { {"Popup Position",new OptionItem{ Values = new List<string> { "Above", "AboveRight", "RightTop", "Right", "RightBottom", "BelowRight", "Below", "BelowLeft", "LeftBottom", "Left", "LeftTop", "AboveLeft"}, CurrentValue = "BelowLeft"}} } }; public ActionResult PopupPosition(FormCollection collection) { IValueProvider data = collection; if (CallbackManager.CurrentIsCallback) { var request = CallbackManager.GetCurrentCallbackData<CollectionViewRequest<object>>(); if (request != null && request.ExtraRequestData != null) { var extraData = request.ExtraRequestData.Cast<DictionaryEntry>() .ToDictionary(kvp => (string)kvp.Key, kvp => kvp.Value.ToString()); data = new DictionaryValueProvider<string>(extraData, CultureInfo.CurrentCulture); } } _gridDataModel.LoadPostData(data); ViewBag.DemoOptions = _gridDataModel; return View(); } } }
PopupPosition.cshtml
@{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true; } @section Styles{ <style> .btn { height: auto; } .popover { display: block; max-width: 600px; width: 400px; } .tab-content > .tab-pane { display: block; } </style> } <label>@Html.Raw(Resources.Popup.Index_Text1)</label> <!-- The contents of popup controls. --> <div class="popover" style="display:none;" id="DemoControl"> <h3 class="popover-title"> @Html.Raw(Resources.Popup.Index_Title1) </h3> <div class="popover-content"> @Html.Raw(Resources.Popup.Index_Content1) </div> </div> <!-- The popup owners. --> <button id="button" type="button" class="btn btn-default"> @Html.Raw(Resources.Popup.Index_ClickToShowPopupForm) <br> <small>(ShowTrigger=Click, HideTrigger=Click, IsResizable=True)</small> </button> <br /><br /> @* Create popup controls with HtmlHelper *@ @(Html.C1().Popup("#DemoControl").Owner("#button").ShowTrigger(PopupTrigger.Click).HideTrigger(PopupTrigger.Click).IsResizable(true) .Position((PopupPosition)Enum.Parse(typeof(PopupPosition), optionsModel.Options["Popup Position"].CurrentValue)) ) @section Settings{ @Html.Partial("_OptionsMenu", optionsModel) } @section Description{ @Html.Raw(Resources.Popup.PopupPosition_Description) }
Documentation