Popup
Popup
ポップアップの位置
機能
サンプル
タイトル
ハロー ポップアップ
これは複数行メッセージです!
これは複数行メッセージです!
設定
説明
オーナ要素に対してポップアップを表示する必要があるポップアップの位置を設定します。
ソース
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) }
マニュアル