Liferay 6.2弹出层/弹出框的实现
曾经写过一个6.1的弹出层的博客：《Liferay 6.1开发学习（十三）：弹出层/弹出对话框的使用》。Liferay更新到6.2之后，在UI层采用了Bootstrap，所以很多写法有变化，弹出层的写法也是一样的。之前那篇博客里面的除了最后一个外，其他的都不能再使用。
在6.2里面如果要使用弹出层，需要使用如下的代码：
AUI().use('aui-modal',function(A) {
var modal = new A.Modal(
{
//bodyContent: '正文件',
contentBox:'#bodyContent',
//srcNode : '#bodyContent',
centered: true,
headerContent: '<h3>Modal header</h3>',
modal: true,
destroyOnHide: true,
render: '#modal',
width: 450,
toolbars:{
footer:[
{
label: '取消',
on: {
click: function() {
modal.hide();
}
}
},
{
label: '确定',
on: {
click: function() {
alert('点击了确定，可以在这里调用其他函数');
}
},
primary: true
} ]
}
}
).render();
});
这是一个完整带按钮的弹出层，弹出的一个DIV，如果是不需要按钮将下面的footer部分去掉即可。
弹出一个JSP或者是portlet
上面的代码是弹出一个div的方法，如果是要弹出一个页面，Use 添加：'aui-dialog-iframe-deprecated','io-plugin-deprecated'，完整的如下：
function popTest(){
AUI().use('aui-modal','aui-dialog-iframe-deprecated','io-plugin-deprecated'
,function(A) {
var url = '${toAddUrl}';
var modal = new A.Modal(
{
bodyContent: '正文件',
//contentBox:'#bodyContent',
//srcNode : '#bodyContent',
centered: true,
headerContent: '<h3>Modal header</h3>',
modal: false,
destroyOnHide: true,
render: '#modal',
width: 750,
height:600,
toolbars:{
footer:[
{
label: '取消',
on: {
click: function() {
modal.hide();
}
}
},
{
label: '确定',
on: {
click: function() {
alert('点击了确定，可以在这里调用其他函数');
}
},
primary: true
} ]
}
}
).plug(
A.Plugin.DialogIframe,
{
uri: url,
}
)
.render();
});
}
主要就是在下面添加了一个plug，用来接受要弹出的页面的地址。
2 条留言 访客：0 条 博主：0 条 引用： 2 条
来自外部的引用： 2 条