Popup
Popup Position
Features
Sample
Title
Hello Popup
This is a multiline message!
This is a multiline message!
Settings
Description
Change Popup position to set where the popup should be displayed with respect to the owner element.
Source
PopupPositionController.cs
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
using System.Collections.Generic;
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(IFormCollection collection)
{
_gridDataModel.LoadPostData(collection);
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(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>
<c1-popup class="popover" style="display:none;" id="popup1" owner="#btn1" hide-trigger="Click" show-trigger="Click" is-resizable="true"
position="@((PopupPosition)Enum.Parse(typeof(PopupPosition), optionsModel.Options["Popup Position"].CurrentValue))">
<h3 class="popover-title">
@Html.Raw(PopupRes.Index_Title)
</h3>
<div class="popover-content">
@Html.Raw(PopupRes.Index_Text0)
</div>
</c1-popup>
@section Settings {
@await Html.PartialAsync("_OptionsMenu", optionsModel)
}
@section Description{
@Html.Raw(PopupRes.PopupPosition_Description)
}
Documentation