1/10/2014

How to open a modal dialog in Liferay

If you want to create modal dialogs (a popover) in liferay you can use the AlloyUI modal component. This component allows you to refer to complex DIVs and pop them over the current window. You can do this without having to reference any additional libs.

Just add this and you will see the content of the 'popupContent' popping up:


var modal = new A.Modal(
{
bodyContent: A.one('#popupContent'),
centered: true,
headerContent: '<h3>This is a header </h3>',
modal: true,
render: '#modal',
zIndex: 1100,
height: 700, 
width: 950
}
).render();

If you like this tutorial it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)

If you have any questions, feel free to leave a comment.