layer.js插件使用一些心得

最近做的一个项目使用了一个叫做layer.js的插件,感觉很不错,在这里写下一些使用心得。

官方下载的地址与使用文档:http://sentsin.com/jquery/layer/

因为官方的使用演示讲解的已经非常清楚了,在这里我就讲解一下就我在项目中的使用心得。

 

情况一:操作请求在iframe页面中,但是弹窗希望是在整个页面中居中,也就是相当于父页面中的弹窗,也就是所谓的在iframe操作父页面

方法如下:在当前的iframe页面中写JS触发效果,希望弹窗的的DIV必须放在iframe父页面中,调用代码如下

     $("#addBank").click(function(){
        var docHeight = document.documentElement.clientHeight;
        top.$.layer({
            type : 1,
            title : '添加银行账号',
            fix : true,
            zIndex : 19891014,
            offset:[(docHeight/2-240)+'px' , ''],
            area : ['auto','350px'],
            page : {dom : '#addWrapper'}
        });
    });

其中top.$.layer就是调用的关键了,top是浏览器的内置对象,表示最顶层容器,这样一来就是实现了iframe控制父页面的弹窗效果了,

"#addWrapper"是父页面中的一个div,id为"addWrapper",其他的参数官方API里面都有详细介绍,这里我就不再啰嗦了

 

情况二:希望弹窗自定义显示的文字的样式,我们可以在接受参数message的时候使用如:"<p style='text-align:center;'>你要显示的文字</p>"的方式来实现

 

 

 

posted @ 2013-12-11 18:28  离尘  阅读(14509)  评论(0编辑  收藏  举报