How to use Dialog Box (Popup) in Liferay 6.2?

Hi guys,

AlloyUI provide many components for different purposes. These components are very flexible and easy to use.

If you want to create/open DialogBox in liferay 6.2  then you can use the AlloyUI component. 

Lets see example.

• create portlet.
• Inside view.jsp put below code

<aui:button name="openDialog" type="button" value="Click Me!!"  />

<liferay-portlet:renderURL var="dialogURL" windowState="<%=LiferayWindowState.POP_UP.toString() %>">

<liferay-portlet:param name="mvcPath" value="/success.jsp" />

</liferay-portlet:renderURL>

<aui:script use="liferay-util-window">

A.one('#<portlet:namespace/>openDialog').on('click', function(event) {

     Liferay.Util.openWindow({ 

     dialog: { 

             centered: true, 

             height: 450, 

             modal: true, 

             width: 450 

             }, 

     id: '<portlet:namespace/>dialog', 

     title: 'Sample Dailog', 

     uri: '<%=dialogURL %>' 

     });

});

</aui:script>

<aui:script>

Liferay.provide(

        window,

'<portlet:namespace/>closePopup',

function(data, dialogId) {

               var A = AUI();

               // Closing the dialog

                var dialog = Liferay.Util.Window.getById(dialogId);

                dialog.destroy(); 

        },

        ['liferay-util-window']

);

</aui:script>

•  Create another jsp as name "success.jsp"

     Put below code inside success.jsp

     <h4>Hello, World!!</h4>

• Then, Deploy your portlet.

Output ...

That's All !!
Let me know if u have any suggestions/queries, I would like to hear from your side.