Popup

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

There's also the PopupForm helper which is used in all of the Crud demos (Grid, AjaxList), also in the Wizard Demo, the PopupForm handles form posts that happen inside it and has 2 buttons by default (OK, Cancel).

Initialize and open popup on button click

PopupDemo/Index.cshtml

@(Html.Awe().InitPopup()
      .Name("popup1")
      .Url(Url.Action("Popup1"))
      .LoadOnce()
      .Title("popup title"))

@Html.Awe().Button().Text("Open Popup").OnClick(Html.Awe().OpenPopup("popup1"))

Demos/Helpers/PopupDemoController.cs

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

PopupDemo/Popup1.cshtml

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

Position top, modal, close on click outside

PopupDemo/Index.cshtml

@(Html.Awe().InitPopup()
    .Name("popupTop")
    .Url(Url.Action("Popup1"))
    .LoadOnce()
    .Modal()
    .Draggable(false)
    .Top()
    .Mod(o => o.OutClickClose())
    .Width(1000)
    .Title("top modal popup"))

@Html.Awe().Button().Text("Open top modal").OnClick(Html.Awe().OpenPopup("popupTop"))

Open without initialization

PopupDemo/Index.cshtml

@Html.Awe().Button().Text("Open Popup").OnClick("openPopupAwe()")
<script>
    function openPopupAwe() {
        awe.open("popupAwe",
            {
                setCont: function (sp, o) {
                    //console.log(utils.getParams(sp));

                    var cont = $('<div style="padding: 0 3em;">Are you sure you want to perform this action?</div>');
                    o.scon.html(cont);
                },
                btns: [
                    {
                        text: 'Yes',
                        ok: 1, // add okbtn class
                        action: function () {
                            $(this).data('api').close();
                        }
                    },
                    {
                        text: 'No',
                        action: function () {
                            $(this).data('api').close();
                        }
                    }],
                height: 200,
                width: 700,
                title: 'please confirm',
                modal: true,
                //params: { p: 123 }
                //top: true,
                //close: function() { console.log('popup closed'); },
                //url: '@Url.Action("Popup1")', // works if setCont and content not set
                //content: 'hello world'
                //outClickClose: true,
                //popupClass: 'class1',
                //fullscreen: true
            });
    }
</script>

Dropdown Popup

click here

PopupDemo/Index.cshtml

@(Html.Awe().InitPopup()
    .Name("popupdd1")
    .Url(Url.Action("DropdownContent"))
    .LoadOnce()
    .Mod(o => o.Dropdown()))

@Html.Awe().Button().Text("open popup").OnClick(Html.Awe().OpenPopup("popupdd1"))
@Html.Awe().Button().Text("open same popup").OnClick(Html.Awe().OpenPopup("popupdd1"))
<br />
<br />

<script>
    $(function () {
        // touchstart for ipad
        $(document).on('click touchstart', '.area', function (e) {
            var ev = e.type == 'touchstart' ? e.originalEvent.touches[0] : e;
            awe.open('popupdd1', { xy: { x: ev.clientX, y: ev.clientY } }, ev);
        });
    });
</script>
<div class="area">
    <div class="msg">click here</div>
</div>
<br />
@(Html.Awe().InitPopup()
    .Name("ddinpop")
    .Url(Url.Action("DdInPopup"))
    .LoadOnce()
    .Modal()
    .Mod(o => o.OutClickClose()))

@Html.Awe().Button().Text("dropdown in popup").OnClick(Html.Awe().OpenPopup("ddinpop"))

Demos/Helpers/PopupDemoController.cs

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

PopupDemo/DropdownContent.cshtml

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

PopupDemo/DdInPopup.cshtml

<div class="area">
    <div class="msg">click here</div>
</div>

Tooltip

show tooltip here

hover me

PopupDemo/Index.cshtml

@(Html.Awe().InitPopup()
    .Name("tip1")
    .Content("hint content"))

<div data-tip='classic tooltip' id='x1' class="tip1">
    show tooltip here
</div>

<div>
    <div class="tip2" data-info="first">hover me</div>
    <div class="tip2" data-info="second">hover me</div>
    <div class="tip2" data-info="third">hover me</div>
</div>

<div class="tip3">
    hover me
    <div class="hidden hint">
        html <b>hint</b><br />
        hint content hidden inside the hover element
    </div>
</div>

<script>
    $(function () {
        awem.hovPopup({
            hover: $('#x1'),
            name: 'tip1' // popup name
        });

        awem.hovPopup({
            hover: $('.tip2'),
            name: 'tip2',
            getCont: function (opener) { return opener.data('info'); },
            hclose: true // will close when hovering the opened popup
        });

        awem.hovPopup({
            hover: $(document),
            hsel: '.tip3',
            tclose: 50, // time to close, default 300
            name: 'tip3Popup',
            getCont: function (opener) { return opener.find('.hint').html(); }
        });
    });
</script>
<style>
    .tip2, .tip1, .tip3 {
        background: bisque;
        display: inline-block;
        margin: 1em;
        padding: 1em;
        color: #000;
    }
</style>
<br />
<br />

Sending client side parameters to server on content load

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

PopupDemo/Index.cshtml

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

<br />

@(Html.Awe().InitPopup()
      .Name("PopupParams")
      .Url(Url.Action("PopupWithParameters"))
      .Parent("txtParam1")
      .Parameter("p1", 15)
      .ParameterFunc("setParams"))
@(Html.Awe().Button().Text("Open Popup")
      .OnClick(Html.Awe().OpenPopup("PopupParams").Params(new { Id = 123 })))

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

Demos/Helpers/PopupDemoController.cs

public IActionResult 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();
}

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/Index.cshtml

@(Html.Awe().InitPopup()
      .Name("psize")
      .Url(Url.Action("PopupSize"))
      .Fullscreen())

@Html.Awe().Button().Text("Open").OnClick(Html.Awe().OpenPopup("psize"))

Buttons

PopupDemo/Index.cshtml

<div id="p3Cont"></div>
@(Html.Awe().InitPopup().Name("p3")
      .Button("Add Hi", "addHi")
      .Button("Close", "closePopup")
      .Url(Url.Action("PopupBtns"))
      .Close("onClose"))

@Html.Awe().Button().Text("Open").OnClick(Html.Awe().OpenPopup("p3"))
<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>

Confirm popup close

PopupDemo/Index.cshtml

@(Html.Awe().InitPopup()
      .Name("popConfirmClose")
      .PopupClass("needConfirm")
      .Title("Close this popup")
      .Content("closing this popup will open a confirm popup"))

<button type="button" class="awe-btn" onclick="awe.open('popConfirmClose')">Open popup with confirm close</button>
<script type="text/javascript">
    $(function () {
        // registering a global confirm close for all popups that have "needConfirm" popup class
        $(document).on('awebfclose', function (e, opt) {
            var pdiv = $(e.target);
            if (!pdiv.closest('.needConfirm').length || opt.force) return;
            opt.noclose = true;

            var mainApi = pdiv.data('o').cx.api;

            awe.open("confirm",
                {
                    content: '<div style="padding: 0 3em;">Are you sure you want to close this popup?</div>',
                    btns: [
                        {
                            text: 'Yes',
                            ok: 1, // add okbtn class
                            action: function () {
                                $(this).data('api').close();
                                mainApi.close({ force: true });
                            }
                        },
                        {
                            text: 'No',
                            action: function () {
                                $(this).data('api').close();
                            }
                        }],
                    height: 200,
                    modal: true,
                    title: 'Confirm close'
                });
        });
    });
</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 that close the other popups on open use .Group(string).

Popup Mods

Open animation

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

PopupDemo/Index.cshtml

@(Html.Awe().InitPopup()
      .Name("popupAnim")
      .Url(Url.Action("Popup1"))
      .Modal()
      .Mod(o => o.OutClickClose())
      .LoadOnce()
      .Title("popup slide in animation"))

@Html.Awe().Button().Text("popup slide in from right").OnClick(Html.Awe().OpenPopup("popupAnim").Params(new { slide = "right" }))
@Html.Awe().Button().Text("popup slide in from bottom").OnClick(Html.Awe().OpenPopup("popupAnim").Params(new { slide = "bot" }))
<button type="button" class="awe-btn" onclick="openPopSlide()">popup slide</button>
<script>
    function openPopSlide() {
        var popup = awe.open('popupAnim');
        slide(popup, 'bot');
    }

    $(function () {
        $(document).on('aweopen', '.awe-popup', function () {
            var popup = $(this);
            var o = popup.data('o');
            var prms = o.params;

            if (prms && prms.slide) {
                slide(popup, prms.slide);
            }
        })
        //.on('awebfclose', '.awe-popup', function (e, opt) {
        //    var popup = $(e.target);
        //    var o = popup.data('o');
        //    var prms = o.params;
            
        //    if (prms && prms.slide) {
        //        if (opt.force) return;
        //        opt.noclose = true;
        //        var div = popup.closest('.o-pmc');
        //        div.css('transition', '.3s');
        //        div.css('right',  -div.outerWidth() - 50);
        //        setTimeout(function() {
        //            o.cx.api.close({ force: true });
        //        }, 300);
        //    }
        //})
            ;
    });

    function slide(popup, from) {
        var o = popup.data('o');
        var max = from == 'bot' ? $(window).height() : $(window).width();
        var transl = 'translate' + (from == 'bot' ? 'Y' : 'X');

        var div = popup.closest('.o-pmc');
        //div.css('right', 0).css('left', '');
        //o.nolay = 1;
        //o.cx.api.lay = function () {
        //    console.log('lay');
        //    div.css('right', 0).css('left', '');
        //};

        div.css('transform', transl + '(' + max + 'px)');

        setTimeout(function () {
            div.css('transition', '.5s');
            div.css('transform', transl + '(0)');

            setTimeout(function () {
                o.nolay = 0;
                div.css('transition', '');
                div.css('transform', '');
                o.cx.api.lay();
            }, 500);
        }, 30);
    }
</script>

Comments