Wednesday, 27 April 2016

Open My Account page in modal using liferay custom theme

In this blog I will explain how to open "My account" page in modal popup using custom theme in liferay 6.2.


  • Prerequisites
    • Have basic knowledge of Liferay 6.2 theme. You can learn more about Liferay theme from here.
  • Requirement
    • Open my account page in modal popup using liferay theme.
  • Implementation
    • Step 1: Create theme and add my account link where you want to add as per your UI requirement.
    • Step 2: Add following function in javascript for open modal popup in theme.
                 <script type="text/javascript">
            /* function for open modal popup onclick of myaccount */
            function openMyAccount() {
                var myAcc_url = '$theme_display.getURLMyAccount()';
                var popUpWindow = Liferay.Util.openWindow({
                    dialog: {
                        align: Liferay.Util.Window.ALIGN_CENTER,
                        cache: false,
                        width: 1200, // width of modal popup
                        modal: true
                    },
                    title: "My Account", // anything you want to give 
                    id: "myAccountPopUpID", //modal id
                    uri: myAcc_url
                });
            }
        </script>
    • Step 3: Bind onclick event on "My account" link created using onClick property.
                  <a href="#" onclick='openMyAccount()'>My Account</a>

3 comments: