Popup

The Awesome Popup component is used to open a popup window or a dropdown, it can be initialized in advance, or opened directly with javascript. The popup content can be defined as a static string, loaded from the server by setting an url, or use a js function that will set content, that function could also load the content via ajax or generate it, grab it from another part of the page. It can beinitialized using Html.Awe().InitPopup() and after opened using awe.open js function.
It can also be opened directly with awe.open without initializing it in advance.

Initialize and open popup on button click  

Popup content loaded from server by setting url
show code
PopupDemo/Index.cshtml
@Html.Awe().InitPopup(new PopupOpt
{
Name = "popup1",
Url = Url.Action("Popup1"),
Title = "popup title"
})

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

<button type="button" class="awe-btn" onclick="awe.open('popup1')">Open, without html helper</button>

Position top, modal, close on click outside 

show code
PopupDemo/Index.cshtml
@(Html.Awe().InitPopup(new PopupOpt
{
Name = "popupTop",
Content = "top modal popup content",
Width = 1000,
Title = "top modal popup title",
LoadOnce = true,
Modal = true,
Top = true,
OutClickClose = true
}))

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

Open without initialization 

Open the popup in javascript without prior initialization.
Popup content is set by a js function which could make an ajax request to the server to get the content if needed.
show code
PopupDemo/Index.cshtml
@Html.Awe().Button().Text("Open Popup").OnClick("openPopupAwe()")

<button type="button" class="awe-btn" onclick="openDropdown(event)">Dropdown Popup</button>

<script>
function openPopupAwe() {
awe.open("popupAwe",
{
setCont: function (sp, o) {
//console.log(aweUtils.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,
//content: 'hello world'
//top: true,
//close: function() { console.log('popup closed'); },
//url: '@Url.Action("Popup1")', // works if setCont and content not set
//params: { p: 123 }
//outClickClose: true,
//popupClass: 'class1',
//fullscreen: true,
//dropdown: true
});
}

function openDropdown(event) {
awe.open('dropDown1', {
content: 'hello world',
dropdown: true
}, event);
// event needed for the popup to know where to drop down from
}
</script>

Dropdown Popup 

Open popup as a dropdown.
The Dropdown will use the eventpassed to awe.open to determine where to drop down from, however the opener can be also defined manually.


show code
PopupDemo/Index.cshtml
@(Html.Awe().InitPopup(new PopupOpt
{
Name = "popupdd1",
Url = Url.Action("DropdownContent"),
LoadOnce = true,
Dropdown = true
}))

@Html.Awe().Button().Text("open popup").OnClick(Html.Awe().OpenPopup("popupdd1"))
<button type="button" class="awe-btn" onclick="awe.open('popupdd1', {}, event)">open the same popup</button>

<br />
<br />
<script>
function dropdownFromHeader(){
awe.open({
setCont: function (sp, o) {
var list = '<ul style="height:calc(100vh - 150px);">';
for (let i = 0; i < 100; i++) {
list += '<li class="mnitm"> item ' + i + '</li>';
}
list += '</ul>';
o.scon.append(list);
},
dropdown: true,
opener: $('#header'),
modal: true,
popupClass: 'sidePopup', // in site.css, removes padding from .awe-popup
width: 200
});
}
</script>
<button type="button" class="awe-btn" onclick="dropdownFromHeader()">dropdown from header</button>

Open dropdown popup on div click 

click here
show code
PopupDemo/Index.cshtml
<script>
$(function () {
// touchstart for ipad
$(document).on('click touchstart', '.area', function (e) {
var ev = e.type == 'touchstart' ? e.originalEvent.touches[0] : e;
awe.open({
id: 'areaPopup',
content: 'popup positioned at XY:<br/> ' + ev.clientX + ' : ' + ev.clientY,
dropdown: true,
width: 200,
xy: { x: ev.clientX, y: ev.clientY } },
ev);
});
});
</script>
<div class="area">
<div class="msg">click here</div>
</div>

Tooltip 

show tooltip here
hover me
hover me
hover me
hover me


show code
PopupDemo/Index.cshtml
@(Html.Awe().InitPopup(new PopupOpt
{
Name = "tip1",
Content = "hint content",
Dropdown = true
}))

<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:
show code
PopupDemo/Index.cshtml
<input type="text" id="txtParam1" value="textbox value abc" />

<br />
@(Html.Awe().InitPopup(new PopupOpt
{
Name = "PopupParams",
Url = Url.Action("PopupWithParameters"),
ParameterFunc = "setParams"
}
.Parent("txtParam1")
.Parameter("p1", 15)))

@(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>

Full screen popup 

show code
PopupDemo/Index.cshtml
@(Html.Awe().InitPopup(new PopupOpt
{
Name = "psize",
Url = Url.Action("PopupSize"),
Fullscreen = true,
Modal = true
}))

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

Buttons 

show code
PopupDemo/Index.cshtml
<div id="p3Cont"></div>

@(Html.Awe().InitPopup(new PopupOpt
{
Name = "p3",
Url = Url.Action("PopupBtns"),
OnClose = "onClose",
Buttons = new []
{
new PopupButtonOpt{ Text = "Add hi text to div", Action = "addHi" },
new PopupButtonOpt{ Text = "Close", Action = "closePopup" },
}
}))

@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 

show code
PopupDemo/Index.cshtml
@(Html.Awe().InitPopup(new PopupOpt
{
Name = "popConfirmClose",
PopupClass = "needConfirm",
Title = "Confirm close example",
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.

show code
PopupDemo/Index.cshtml
@(Html.Awe().InitPopup(new PopupOpt
{
Name = "popupAnim",
Url = Url.Action("Popup1"),
Modal = true,
OutClickClose = true,
LoadOnce = true,
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);
}
});
});

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('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>

See also the PopupForm helper used in Grid Popup CRUD demo, and in the Wizard Demo


Comments