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>"的方式来实现