在日常的开发中，为了提高用户体验，经常会使用弹出层或者弹出框。在Liferay中可以使用AUI的标签及封装的JavaScript代码方便的达到这一目的。针对弹出内容的不同，弹出对话框大体上可以分为三种形式，弹出div层、弹出普通的HTML页或JSP页面、弹出portlet。

注意：本文的方法除了最后一个，其他的仅在6.1下面有效果。6.2的弹出方法请参看这篇文章：《6.2弹出层的实现》

一、弹出div层

有几种写法，本质上是一样的，一种是普通的JavaScript代码，一种是使用aui标签。

1、普通的javascript代码

function test(){
AUI().use('aui-dialog', function(A) {
var popup = new A.Dialog(
{
bodyContent: A.one('#webDav').html(),
centered: true,
destroyOnClose: true,
modal: false,
title: '弹出层测试',
width: 500,
buttons: [
{
label: '确定',
handler: function() {
alert('点击了确定');
}
},{
label:'取消',
handler:function(){
this.close();
}
}
]
}
).render();
});
}

代码看起来有点小复杂，其实很简单，逐步的说明一下：

var popup： 这是定义当前的弹出层对象。在其他地方可以使用popup.close()关闭当前的对话框。

bodyContent: A.one('#webDav').html()：表示弹出层的正文，这里是弹出一个id为webDav的对象。A.one('#webDav').html()这是aui代码的写法(aui其实是YUI的衍生版，所以和YUI的用法基本上一样)，表示选择id为webDav的对象，取其中的html代码。
centered：弹出后是否居中，默认为false.
destroyOnClose：是否在半闭时销毁
modal: 是否模态否，也就是是不是锁定背景是否让背景可以编辑，值为true/false，默认为false，为true时背景不可以编辑。
title:弹出层的标题，使用单引号或双引号。
width:弹出层的宽度，必须为数字，不能用百分比。如果不写为自适应。
height:弹出层的高度，如果不写为自适应。
buttons:在弹出层上面定义的按钮。非必须。我们一般添加确定和取消两个。多个按钮之间使用逗号分割，text的内容为按钮的显示值，handler为绑定的方法
2、使用aui标签
var create = A.one('#createNew');
create.on(
'click',
function(event) {
var popup = new A.Dialog(
{
bodyContent: A.one('#webDav').html(),
centered: true,
modal: true,
title: '弹出层测试',
width: 500
}
).render();
}
);

和上面的的基本上差不多，这里是在createNew的对象上绑定了一个click的方法，如果此对象被点击了，执行弹出层代码。其他的和上面的一样。

上面使用的是aui标签，所以需要在页中引入

3、使用Liferay.provide

此种方法和上面的非常类似，如下：

Liferay.provide(
window,
'showDialog',
function() {
var A = AUI();
var dialog = new A.Dialog(
{
bodyContent: A.one('#webDav').html(),
destroyOnClose: true,
modal: false,
title: '这是标题',
width: 900
}
).render();
},
['aui-dialog']
);
写法和上面的没有太多的区别，只是写法的不同。showDialog 这个参数其实就是函数名，在其他地方可以直接调用此方法来弹出下面的弹出层，如果是要传参数可以直接写在showDialog(arg)这个里面。上面的的function里面添加此参数。如function(arg)，在下面直接使用arg参数即可。
二、弹出一个HTML页面或者是JSP页面。
弹出一个页面的方法和上面的基本上相同，具体看下面的示例。
Liferay.provide(
window,
'showDialog',
function() {
var A = AUI();
var url= "要弹出的页面的地址";
var dialog = new A.Dialog(
{
destroyOnClose: true,
modal: false,
title: '这是标题',
width: 900
}
).plug(
A.Plugin.IO,
{
uri: url
}
).render();
},
['aui-dialog']
);
不同之处是加了一个plug来显示待弹出的页面地址。在dialog里面也可以添加bodyContent属性，里面可以添加上在弹出的过程的提示语，比“页面正在加载中请稍候……”，在url加载后将替换上面的内容。
三、弹出一个portlet页面。
使用二里面的方法也可以弹出一个portlet页面，但是有时候会不能正常工作，步骤2的弹出的原理还是弹出一个div，在这个div里面加载目标页面的内容。弹出portlet页面我们需要弹出一个iframe，这样就可以使弹出的portlet页面正常工作。方法如下：
Liferay.provide(
window,
'showPortletUrl',
function(url) {
var instance = this;
Liferay.Util.openWindow(
{
cache: false,
dialog: {
align: Liferay.Util.Window.ALIGN_CENTER,
after: {
render: function(event) {
this.set('y', this.get('y') + 50);
}
},
width: 1000
},
dialogIframe: {
id: 'siteManagementIframe',
uri: url
},
title: '管理页面',
uri: url
}
);
},
['liferay-util-window']
);

在上面的方法中我是将待弹出的porltet的URL以参数的形式传进来的，调用的时候方法为：showPortletUrl(url)。dialogIframe中的id为弹出的iframe的id名，uri为待加载的portlet页面地址。

注意：如果要弹出porltet，请讲windowState设为pop_up，也就是LiferayWindowState.POP_UP这个变量。