html弹出框代码6,Liferay 6.1开发学习（十三）：弹出层/弹出对话框的使用 | IT人生录...

在日常的开发中，为了提高用户体验，经常会使用弹出层或者弹出框。在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这个变量。