Popup in Liferay Using Alloy-ui

Here is the sample example to display pop up in liferay using Alloy -ui

In pop up body you can display any thing you want

here in our example we will display simple greeting message in pop up window

These are Imports:

<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>

<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>

<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>

<%@page import="com.liferay.portal.kernel.language.LanguageUtil"%>

<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>

<liferay-theme:defineObjects/>

<portlet:defineObjects/>

Render URL

<portlet:renderURL var="simpleDialogIframe"

 windowState="<%=LiferayWindowState.POP_UP.toString()%>">

 <portlet:param name="render" value="showPopUp"/>

 </portlet:renderURL>

In Controller Render()

@RenderMapping(params = "render=showPopUp")

public String showPopup(RenderRequest request, RenderResponse response){

System.out.println("Under Render");

return showPopUp;

}

Button On Click Opening PopUp

 <aui:button name="f1" value="Click" onClick="popUpModel()"/>

PopUp Script

 <aui:script>

 function popUpModel(){

 var url = "<%=simpleDialogIframe.toString()%>";

   AUI().use('aui-base', 'liferay-util-window', 'aui-io-plugin-deprecated', function(A){

       var popupWidth = 300;

       var customPopUp = Liferay.Util.Window.getWindow({

           dialog:{

               centered: true,

               constrain2view: true,

               modal: true,

               resizable: false,

               destroyOnClose: true,

               destroyOnHide: true,

               width: popupWidth,

               height:250,

               after:{

                   destroy: function(event){

                   }

               }

           },

           id: "<portlet:namespace/>dialogId"

       }).plug(A.Plugin.DialogIframe,{

           autoLoad: true,

           iframeCssClass: 'dialog-iframe',

           uri: url

       }).render();

       customPopUp.show();

       customPopUp.titleNode.html('<h1>RITHWIK</h1>');

   });

}

</aui:script>

in our example we have created one spring portlet in that i am opening a PopUp in PopUp I am rendering jsp