Popup

It is initialized using Html.Awe().InitPopup() and after opened using awe.open js function.

Initialize and open popup on button click

PopupDemo.aspx

<% InitPopup1.InitPopup()
    .Name("popup1")
    .Url(Page.Url().Action("Popup1", "PopupDemo"))
    .LoadOnce()
    .Title("popup title"); %>
<awe:Ocon runat="server" ID="InitPopup1" />

<% Button1.Button().Text("Open Popup").OnClick(Page.Awe().OpenPopup("popup1")); %>
<awe:Ocon runat="server" ID="Button1" />

Demos/Helpers/PopupDemoController.cs

public ActionResult Popup1()
{
    return PartialView();
}

\Views\PopupDemo/Popup1.cshtml

Popup content loaded via ajax at @DateTime.UtcNow.ToLongTimeString() UTC

Position top, modal, close on click outside

PopupDemo.aspx

<% InitPopupMod.InitPopup()
      .Name("popupTop")
      .Url(Page.Url().Action("Popup1", "PopupDemo"))
      .LoadOnce()
      .Modal()
      .Top()
      .Mod(o => o.OutClickClose())
      .Width(1000)
      .Title("top modal popup"); %>
<awe:Ocon runat="server" ID="InitPopupMod" />

<% ButtonTop.Button().Text("Open top modal").OnClick(Page.Awe().OpenPopup("popupTop")); %>
<awe:Ocon runat="server" ID="ButtonTop" />

Dropdown Popup

click here

PopupDemo.aspx

<% InitPopup2.InitPopup()
    .Name("popupdd1")
    .Url(Page.Url().Action("DropdownContent", "PopupDemo"))
    .LoadOnce()
    .Mod(o => o.Dropdown()); %>
<awe:Ocon runat="server" ID="InitPopup2" />

<% Button2.Button().Text("open popup").OnClick(Page.Awe().OpenPopup("popupdd1")); %>
<awe:Ocon runat="server" ID="Button2" />
<% Button3.Button().Text("open same popup").OnClick(Page.Awe().OpenPopup("popupdd1")); %>
<awe:Ocon runat="server" ID="Button3" />
<br />
<br />
<div class="area">
    <div class="msg">click here</div>
</div>
<script>
    $(function () {
        $(document).on('click', '.area', function (e) { awe.open('popupdd1', { xy: { x: e.clientX, y: e.clientY } }, e); });
    });
</script>
<br />
<% InitPopup3.InitPopup()
    .Name("ddinpop")
    .Url(Page.Url().Action("DdInPopup", "PopupDemo"))
    .LoadOnce()
    .Modal()
    .Mod(o => o.OutClickClose()); %>
<awe:Ocon runat="server" ID="InitPopup3" />

<% Button4.Button().Text("dropdown in popup").OnClick(Page.Awe().OpenPopup("ddinpop")); %>
<awe:Ocon runat="server" ID="Button4" />

Demos/Helpers/PopupDemoController.cs

public ActionResult DropdownContent()
{
    return PartialView();
}

\Views\PopupDemo/DropdownContent.cshtml

<div style="max-width: 250px;">
    Popup content loaded from the server at @(DateTime.UtcNow.ToLongTimeString()) UTC
</div>

Sending client side paramters to server on content load

Value sent to the server action that returns the popup's content:

PopupDemo.aspx

<input type="text" id="txtParam1" value="textbox value abc" />

<br />

<% InitPopup4.InitPopup()
      .Name("PopupParams")
      .Url(Page.Url().Action("PopupWithParameters", "PopupDemo"))
      .Parent("txtParam1")
      .Parameter("p1", 15)
      .ParameterFunc("setParams"); %>
<awe:Ocon runat="server" ID="InitPopup4" />

<% Button5.Button().Text("Open Popup")
      .OnClick(Page.Awe().OpenPopup("PopupParams").Params(new { Id = 123 })); %>
<awe:Ocon runat="server" ID="Button5" />

<script>
    function setParams() {
        return { a: "hi", b: "how are you" };
    }
</script>

Demos/Helpers/PopupDemoController.cs

public ActionResult PopupWithParameters(string parent, int p1, string a, string b, int id)
{
    ViewData["parent"] = parent;
    ViewData["p1"] = p1;
    ViewData["a"] = a;
    ViewData["b"] = b;
    ViewData["id"] = id;

    return PartialView();
}

\Views\PopupDemo/PopupWithParameters.cshtml

parameter set in the OpenPopup call: id = @ViewData["id"]
<br />
value of the parent: @ViewData["parent"] <br/>
<br/>
value of the p1 parameter: @ViewData["p1"] <br/>
<br />
parameters sent by js function set using ParameterFunc:<br/>
a = @ViewData["a"] <br/>
b = @ViewData["b"] <br/>

Full screen popup

PopupDemo.aspx

<% InitPopup5.InitPopup()
      .Name("psize")
      .Url(Page.Url().Action("PopupSize", "PopupDemo"))
      .Fullscreen(); %>
<awe:Ocon runat="server" ID="InitPopup5" />

<% Button6.Button().Text("Open").OnClick(Page.Awe().OpenPopup("psize")); %>
<awe:Ocon runat="server" ID="Button6" />

Buttons

PopupDemo.aspx

<div id="p3Cont"></div>
<% InitPopup6.InitPopup().Name("p3")
      .Button("Add Hi", "addHi")
      .Button("Close", "closePopup")
      .Url(Page.Url().Action("PopupBtns", "PopupDemo"))
      .Close("onClose"); %>
<awe:Ocon runat="server" ID="InitPopup6" />

<% Button7.Button().Text("Open").OnClick(Page.Awe().OpenPopup("p3")); %>
<awe:Ocon runat="server" ID="Button7" />
<div id="p3Log"></div>
<script type="text/javascript">
    function closePopup() {
        $(this).data('api').close();
    }

    function addHi() {
        $(this).prepend('<p>hi</p>');
        $(this).data('api').lay();
    }

    function onClose() {
        awe.flash($('#p3Log').html('popup was closed at ' + site.getFormattedTime()));
    }

</script>

Autosize

Open any popup and try resizing the browser (try to make it smaller than the popup), works for popups from other helpers as well.

Notes

When there is more Popup helpers declared that have the same .Name(string), they will share the same popup window, so opening one will close the other; if you need to have popups with different names to share the same popup window use .Group(string).

Open animation

Using custom js to create a slide in animation when the popup opens.

PopupDemo.aspx

<div class="btn-cont">
    <button type="button" class="awe-btn" onclick="openPopSlide('right')">slide from right</button>
    <button type="button" class="awe-btn" onclick="openPopSlide('left')">slide from left</button>
    <button type="button" class="awe-btn" onclick="openPopSlide('top')">slide from top</button>
    <button type="button" class="awe-btn" onclick="openPopSlide('bottom')">slide from bottom</button>
    <button type="button" class="awe-btn" onclick="openPopSlide('top', 1500)">custom time</button>
</div>

<script>
    function openPopSlide(dir, time) {
        awe.open({
            id: 'popupAnim',
            url: '<%:Page.Url().Action("Popup1", "PopupDemo")%>',
            openAnim: (opt) => awe.anim({ opt, type: 'slide', dir, time }),
            height: 200
        });
    }
</script>

Comments