This tutorial will go on to demonstrate on creating AUI modal dialogs or  popups using Liferay AUI and also loading JSP file in popup or modal in Liferay.  In Liferay we can create modal popups in two ways:

  1. Lifeary Util Window Dialog.                                                                                                                                                         In this, we can load JSP in modal window it self by using Liferay.Util.openWindow java script.
    1. Create a render URL that will point to JSP file load                                                                                                        <portlet:renderURL var=”popupUrl” windowState=”<%=LiferayWindowState.POP_UP.toString() %>”>
      <portlet:param name=”mvcPath” value=”/test.jsp”/>
      </portlet:renderURL>
    2. Create a div or anchor tag where user will click on that
    3. Write a AUI callback method to register a click event
    4. Sample JSP code:
    5. <%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
      <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
      <%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
      <portlet:defineObjects />
      <h1>Popup Demo</h1>
      <portlet:renderURL var="popupUrl" windowState="<%=LiferayWindowState.POP_UP.toString() %>">
       <portlet:param name="mvcPath" value="/test.jsp"/>
      </portlet:renderURL>
      <div id="popup_id">
       Click here
      </div>
      <aui:script use="liferay-util-window">
      A.one('#popup_id').on('click', function(event) {
       Liferay.Util.openWindow({ dialog: { 
       centered: true, 
       height: 500, 
       modal: true, 
       width: 500 
       }, 
       id: '<portlet:namespace />dialog',
       title: 'DemoPortlet', 
       uri: '<%=popupUrl%>' 
       }); 
       });  </aui:script>
  2. Lifeary AUI Modal
    Lifeay 6.2 uses AUI2.0, so it will not support aui-dilog new A.Dialog({}) method and it will throw error “a.Dialog is not a constructor.  Instead you need to use A.Modal({}). below is code snippet that user AUI modal dialog’,
<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<portlet:defineObjects />
<h1>AUI Modal Popup Demo</h1>
<div id="aui_popup_click">
 AUI Poup Click
</div>
<div id="aui_popup_content" >
 This is AUI popup content
</div>

<aui:script use="aui-modal,aui-overlay-manager">
A.one("#aui_popup_click").on('click',function(event){
 var dialog = new A.Modal({
 title: "AUI Popup",
 bodyContent: "AUI MOdal",
 headerContent: 'Modal header',
 centered: true,
 modal: true,
 height: 200,
 width:300,
 render: '#aui_popup_content',
 close: true
 });
 dialog.render();
 });
</aui:script>

1 Comment

  1. John Russell

    Thank you very much for this modal sample

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *