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 wellNotes:
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])