Step 1 : create document library URL in your jsp

    <% long dlScopeGroupId = themeDisplay.getScopeGroupId();

          LiferayPortletURL documentLibURL = PortletURLFactoryUtil.create(request,          

          PortletKeys.JOURNAL, themeDisplay.getPlid(), PortletRequest.RENDER_PHASE);

          documentLibURL.setWindowState(LiferayWindowState.POP_UP);

          documentLibURL.setPortletMode(PortletMode.VIEW);

          documentLibURL.setParameter("struts_action","/journal/select_document_library");

          documentLibURL.setParameter("groupId", String.valueOf(dlScopeGroupId));

     %>

 

Step 2: Create a div or html content

         <input type="hidden" name="<portlet:namespace/>documentLibraryInput" 

               id="<portlet:namespace/>documentLibraryInput" />

         <div class="profile-image">

          <img class="journal-image" hspace="0" id="<portlet:namespace/>article-image" src=""   

           style="width:82px;height:83px" vspace="0" />

           </div>

<div class="image-data">

<label>

<a style="text-decoration: none;cursor: pointer;"

onclick="javaScript:<portlet:namespace/>showImages()" >

Select a thumbnail image

</a>

</label>

</div>

 

Step 3: Create javascript Function

<script charset="utf-8" type="text/javascript">

function <portlet:namespace/>showImages()

{

AUI().ready('aui-dialog','aui-dialog-iframe','aui-overlay-manager','liferay-portlet-url', function(A) {

var url = '<%= documentLibURL %>';

window.myDialog = new A.Dialog(

{

title: '',

width: 1050,

draggable: true,

modal: true,

xy: [150, 50],

id:'documentDetails'

}

).plug(

A.Plugin.DialogIframe,

{

uri: url,

iframeCssClass: 'dialog-iframe'

}

).render();

});

}

 

</script>

 

Step 4 : after completion of step 3 on click of Select a thumbnail image Document Library popup will be open, now after choosing an image from poprup we need to keep those values in parameters of jsp

<script charset="utf-8" type="text/javascript">

function _15_selectDocumentLibrary(url) {

document.getElementById("<portlet:namespace/>documentLibraryInput").value = url;

var pic1 = document.getElementById("<portlet:namespace/>article-image");

pic1.src = url;

var iframe = document.getElementById('documentDetails');

iframe.parentNode.removeChild(iframe);

}

</script>