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

.Title("meals list popup")

<button type="button" onclick='awe.open("popup1")' class="awe-btn">Open Popup</button>

public ActionResult Meals()
return PartialView();

overflow-y: scroll;

DropdownPopup Mod

.Title("meals list popup")
.Mod(o => o.Dropdown())

<button type="button" class="awe-btn" onclick="awe.open('popupdd1', {}, event)">open dropdown popup</button>
<button type="button" class="awe-btn" onclick="awe.open('popupdd1', {}, event)">open dropdown popup</button>
public ActionResult DropdownContent()
return PartialView();
<div style="max-width: 250px;">
Popup content loaded from the server at @(DateTime.UtcNow.ToLongTimeString()) UTC

Sending client side paramters to server on content load

Value sent to the server action that returns the popup's content:
<input type="text" id="txtParam1" value="abc" />

<br />

.Parameter("p1", 15)

<button type="button" class="awe-btn" onclick="awe.open('PopupParams', { params: { id: 123 } })">Open Popup</button>

function giveParams() {
return { a: "hi", b: "how are you" };
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();
value of the parent: @ViewData["parent"] <br/>
value of the p1 parameter: @ViewData["p1"] <br/>
parameters sent by js function set using ParameterFunc:<br/>
a: @ViewData["a"] <br/>
b: @ViewData["b"] <br/>
id: @ViewData["id"]

Full screen popup

.Content("hi, try resizing the browser window"))

<button class="awe-btn" onclick="awe.open('pfulls')">Open</button>


<div id="p3Cont"></div>
.Button("Add Hi", "addHi")
.Button("Say Hi", "sayHi")
.Button("Close", "closePopup")
.Tags("p3Cont") /* used by the inline popup only */)

<button type="button" class="awe-btn" onclick="awe.open('p3')">Open popup with buttons</button>
<script type="text/javascript">
function closePopup() {

function sayHi() {

function addHi() {

function onClose() {
alert('popup was closed');



By default the awesome popup is used for the popup, but this can be changed by setting the awe.popup. You may choose to use just one or multiple popup mods. In the top right corner you can see a dropdown that allows you to change the current popup mod, this dropdown changes the value of popupMod variable which is used in the following code:
//this code uses popupMod variable specific to this demo, you shouldn't need this, 
//use utils.setPopup to be able to use the DropdownPopup and Inline (already called in utils.init)
function setAweDemoPopup() {
awe.popup = function (o) {
if (o.tag && o.tag.DropdownPopup) {
return awem.dropdownPopup(o);
} else if (o.tag && o.tag.Inline) {
return awem.inlinePopup(o);
} else if (popupMod == 'inline') {
return awem.inlinePopup(o);
} else if (popupMod == 'bootstrap') {
return awem.bootstrapPopup(o);
} else if (popupMod == 'awesome') {
return awem.dropdownPopup(o);
} else {
return awem.uiPopup(o);
o.tag.Inline is necessary for Grid in nest editing demo, if you set .Tag(new{Inline = true}) the inline popup will be used regardless of popupMod value.


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


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).