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