Create popup in Liferay

Liferay Dialog

function createDialog(param) {
    AUI().use(
            'liferay-portlet-url',
            'aui-dialog',
            'aui-dialog-iframe',
            function(A) {
                var url = Liferay.PortletURL.createRenderURL();
                url.setPortletId("portletName_WAR_contextName");
                url.setParameter("param", param);
                url.setWindowState('pop_up');
                var dialog = new A.Dialog({
                    id : 'mydialog',
                    centered : true,
                    title : 'Popup',
                    height : 'auto',
                    resizable : false,
                    modal : true,
                    scrollable : false,
                    destroyOnClose : true,
                    on : {
                        close : function() {
                            //do something here
                        },
                    }
                }).plug(A.Plugin.DialogIframe, {
                    uri : url,
                    iframeCssClass : 'dialog-iframe',
                }).render();
            });
}

In this case, we create url by using Liferay.PortletURL. If you want to create it in view.jsp, use:

<liferay-portlet:renderURL var="pagelLink"
    plid="<%=pageLayoutId%>"
    portletName="<%=portletName%>">
</liferay-portlet:renderURL>

with pageLayoutId got from:

    long pageLayoutId = 0l;
    if (PortletUtility.getPlid("Page Name") != null) {
        pageLayoutId = Long.valueOf(PortletUtility.getPlid("Page Name");
    }

If you want to add parameters to link, append this link with format like below:
&_PortletName_WAR_portletProjectName_paramName=paramValue

Ex: '&_ATMSeriesInfo_WAR_atmuiportlet_id=' + id

Liferay Popup

function showPopup(title, content, okLabel, cancelLabel, OKHandler, cancelHandler) {
    AUI().use('aui-dialog',
      function(A) {
        var buttons = [];
        if(okLabel) {
            var okBut = {
                    handler: function() {
                        if(OKHandler) {
                            OKHandler();
                        }
                        this.close();
                    },
                    label: okLabel
                  };
            buttons.push(okBut);
        }
       
        if(cancelLabel) {
            var cancelBut = {
                    handler: function() {
                        if(cancelHandler) {
                            cancelHandler();
                        }
                        this.close();
                    },
                    label: cancelLabel,
                  };
            buttons.push(cancelBut);
        }

        new A.Dialog(
          {
            bodyContent: content,
            buttons: buttons,
            centered: true,
            draggable: true,
            resizable: false,
            title: title,
            width: 400,
            height: 150,
            modal: true
          }
        ).render();
      }
    );
}

Liferay.Util javascript

For example creating a link display your account info in a popup:

<a href=\"javascript:Liferay.Util.openWindow({dialog: {destroyOnHide: true}, title: '" + LanguageUtil.get(pageContext, "my-account") + "', uri: '" + HtmlUtil.escape(myAccountURL) + "'});\">