layer弹出层显示在top顶层

http://blog.youkuaiyun.com/yjb7268888/article/details/53390466

（一）因为项目框架用了iframe，所以在用layer时，默认layer.open弹出的窗口只能在iframe子窗口区域显示。现在想让layer在父窗口或者说框架的最顶层显示，想到用top.layer.open或者parent.layer.open,但是没反应。后面想到应该是在父页面中没有导入layer.js文件，导入后就能正常显示在父窗口页面区域了。

显示在顶层窗口

[html]  view plain  copy

1. top.layer.open({  
2.               type: 2,  
3.               title: '标题',  
4.               shadeClose: true,  
5.               shade: 0.3,  
6.               area : ['850px' , '450px'],  
7.               <span style="color: rgb(51, 51, 51); font-family: 'Courier New'; line-height: 20px; white-space: pre-wrap;">content: 'http://sentsin.com' //这里content是一个URL，</span>  
8.             });   

显示在父窗口

[html]  view plain  copy

1. parent.layer.open({  
2.               type: 2,  
3.               title: '标题',  
4.               shadeClose: true,  
5.               shade: 0.3,  
6.               area : ['850px' , '450px'],  
7.               <span style="font-family: 'Courier New'; white-space: pre-wrap;">content: 'http://sentsin.com' //这里content是一个URL，</span>  
8.             });   

top和parent是浏览器的内置对象，top表示最顶层容器,parent表示父容器，这样一来就是实现了iframe控制父页面或者顶层页面的弹窗效果了。

http://blog.youkuaiyun.com/zhu_nana/article/details/49902383

(二) layer 是一款使用非常方便且功能强健的 jQuery 弹出层插件，对各类浏览器中的兼容性也很好。使用它可以创建出交互体验更好的 Web 应用程序。

layer 的维护人员是一群和小G年龄相仿，富有激情的前端开发人员，所以大家不用担心它的升级问题。

layer 的官方网址：layer 官方演示与讲解

 

 

layer 弹出iframe 层

$.layer({
  type: 2,
     title: '设备详细',
     shadeClose: true,//点击遮罩关闭层
     shade: 0.8,
     area: ['90%', '90%'],
     //content: 'http://www.baidu.com/' //iframe的url
     iframe: {
      src:‘http://baidu.com’

     }
 });

 

 

layer 提供了信息框、询问框、页面层、iframe 和 tips 等多种展示方式，具体使用方式请参见官网的示例和API。