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 image of the user and its name in pop up window

	<aui:script>
	function openPopup(potraitId ,userName){
	var imagePath = '<%= themeDisplay.getPathImage() %>';
	var t = "<img src=''>";
	var newtest = "<img src="+imagePath+"/user_portrait?img_id="+potraitId+" ></img>";
	var newtest1 = "<form><table><tr><td><img src="+imagePath+"/user_portrait?img_id="+potraitId+" ></img></td><td>"+userName+"</td></tr>
	</table></form>";
	AUI().ready('aui-dialog', 'aui-overlay-manager', 'dd-constrain', function(A) {
	var dialog = new A.Dialog({
	title: 'DISPLAY CONTENT',
	centered: true,
	modal: true,
	width: 400,
	height: 200,
	bodyContent: newtest1
	}).render();
	});
	}
	</aui:script>

view raw aui-popup.js hosted with ❤ by GitHub

In above aui script you can specify different parameter like Height,Width , alignement etc.
In body content you can specify the HTML element you want to display in pop up
in our example we have created one form and inside that one table .be carefull about the parameter passing inside body content of popup other wise it will create problem.


Here on click of the below link it will open new pop up

<a href="javascript:openPopup('<%=(Long) list.getPotraitId()%>','<%=(String) list.getUserName()%>')">Click Here For PopUp</a>

view raw aui-popup-link.txt hosted with ❤ by GitHub