Popup
Popup Position
Change Popup position to set where the popup should be displayed with respect to the owner element.
Features
Settings
Description
Change Popup position to set where the popup should be displayed with respect to the owner element.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | @ { 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) } |