Popup

This component is used to display a popup, you can add buttons to it and specify js functions for each button. The content of the popup can be filled with the result of an action, or defined in the view.

Basic usage

It can be used by initialising it first and opening it after using js like this:

@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"))

Note: 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.

Opening the popup

You can open an initialised popup using the

awe.open

js function, like this:

awe.open('popup1');

and if you need to send additional parameters (like for an edit grid row button), you can do it like this:

awe.open('popup1', { params: { id: 73 }); 
// or
awe.open({ id: 'popup1', params: { id: 73 }); 

Open popup without prior initialization

The popup can be opened by simply calling

awe.open

without having to initialize it first, example:

awe.open({ content: 'hi' });

Example with all the options:

awe.open({
    id: 'popupAwe', // optional
    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
});

Api

Access the api by calling:

var api = $('#popup1').data('api');
api.close(); // close the popup
api.lay(); // lay the popup

PopupOpt

Buttons	Buttons
Content	Set the content of the popup
Dropdown	Drop down the popup from the opener position
Fullscreen	If true the popup will fill the browser window
Group	Popups in the same group can't be open at the same time, so opening one will close the other
Height	Set the height of the popup
Inline	Inline popup
InlTrg	html id of the inline popup container
LoadOnce	Load popup content when it's opened for the first time only (default false)
MaxWidth	Set the max width of the popup
Modal	Modal popups create an overlay below the Popup div but above other page elements
Name	Gives the popup a name; default name is awesomePopup; when using 2 popups with same name opening one will close the other.
OnClose	JS function to execute on popup close
OutClickClose	Close popup when clicking outside of it
ParameterFunc	Set the name of a js function which will return parameters to be sent to the server on each load
Parameters	Additional parameters to send on load
Parents	When a parent element changes value the child will reload and get the parent value as a parameter
PopupClass	Set a string to be added in the class attribute of the popup element
ShowHeader	Show popup header
Title	Title of the popup
Top	Set popup position top
Url	The Url from where to load the content of the popup
Width	Width of the popup