Theme: Popup:

Popup

It is initialized using Html.Awe().InitPopup() and after opened using awe.open js function, or by using the Html.Awe().PopupActionLink, Url.Awe().PopupAction helpers.

Initialize and open popup on button click

    <%:Html.Awe().InitPopup()
.Name("popup1")
.Url(Url.Action("Meals"))
.Title("meals list popup")
.Width(500)
.Height(450)%>

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

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="hi there"/>  

<br/>

<%:Html.Awe().InitPopup()
.Name("popup4")
.Url(Url.Action("PopupWithParameters"))
.Parent("txtParam1")
.Parameter("p1", 15)
.ParameterFunc("giveParams")%>

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

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

Full screen popup

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

Buttons

Open
    <div id="p3Cont"></div>
<%:Html.Awe().PopupActionLink().Name("p3")
.LinkText("Open")
.Button("Add Hi", "addHi")
.Button("Say Hi", "sayHi")
.Button("Close", "closePopup")
.Content("Popup with buttons, each button has a js function for the click event")
.Close("onClose")
.Tags("p3Cont") /* used by the inline popup only */
%>
<script type="text/javascript">
function closePopup() {
$(this).data('api').close();
}

function sayHi() {
alert('hi');
}

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

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

</script>

Autosize (jQueryUI)

Open any popup and try resizing the browser (try to make it smaller than the popup), work on 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.

for jQueryUI popup position can be 'center', 'left', 'right', 'top', 'bottom' or [x,y] (e.g. [350,100])