弹出层/弹出对话框的使用

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

一、弹出div层

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

1、普通的javascript代码

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

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标签

"aui-dialog">
    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标签，所以需要在页中引入

<%@ taglib uri="http://liferay.com/tld/aui" prefix="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这个变量