layerAPI使用介绍
layer API之键值（仅在需要时配置，未配置的会用默认）
原生：layer.alert('content'，'1',['title','aaa'],function
index(){alert('回调函数');});
修改：layer.alert('content'，'1','title',function
index(){alert('回调函数');});
层的皮肤编号，值为整数型。
目前默认只提供一种皮肤，当你按照样式规则新增皮肤时，你需配置该参数。
shade : [0.5 , '#000' , true]
控制遮罩。0.5：遮罩透明度，'#000'：遮罩颜色，true：是否遮罩（否：false）
shadeClose : false
用来控制点击遮罩区域是否关闭层。(是：true)
fix : true,
层是否固定。否：false
move : ['.xubox_title' , true]
控制层拖拽。'.xubox_title'：拖拽绑定事件所在元素选择器（默认为标题栏），true：是否允许拖拽（否：false）
层的类型。0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：小tips层
重要参数，在调用不同层类型时必须设置
title : ['信息' , true]
控制标题栏。'信息'：标题栏文字，true：是否显示标题栏（否：false）
offset : ['220px' , '50%']
控制层坐标。'220px'：纵坐标，'50%'：横坐标
较重要参数
area : ['310px' , 'auto']
控制层宽高。'310px'：宽，'auto'：高
closeBtn : [0 , true]
控制层右上角关闭按钮。0：关闭按钮风格（1：风格2），true：是否显示关闭按钮（否：false）
自动关闭等待秒数，整数值
border : [10 , 0.3 , '#000', true]
10：边框大小，0.3：边框透明度，'#000'：边框颜色，true：是否显示边框（否：false）
通过它您可以任意配置边框，如果你觉得她碍眼，你完全可以不输出她。
控制层堆叠顺序（z-index）。整数值，默认是贤心的生日。
合理设置它，可以避免与其它插件的z-index冲突
maxWidth : 400
最大宽度。整数值。
当宽度设为auto时才有用。
fadeIn : [300 , false]
控制层的渐显。300：渐显频率，false：是否开启渐显（默认不开启，true:开启）
这效果，有人爱、有人厌。
dialog : {
btn : ['确定','取消'],
yes : function(index){ },
no : function(index){ }
信息框层模式私有参数。
btns : 按钮的个数。提供了0-2的选择
btn : [按钮一的值 , 按钮二的值]
type : 图标类型，提供了0-10的选择，可以试一试每一个图标，有你喜欢的吗？
msg : 信息框内容，重要参数
yes :按钮一的回调
no :按钮二的回调
page : {dom : '#xulayer'}
页面层模式私有参数。dom：需要弹出的html片段所对应的选择器（class 或 id，推荐用id，确保唯一。）
当你设置了type:1时，dom是必须要设置的，否则无法捕获元素。很常用。
iframe : {src : ''}
iframe层模式私有参数。src：要打开的网址
使用率非常高，尤其是对于喜欢用iframe的同学。
loading : {type : 0}
加载层私有属性。type：loading图标类型（提供了0-3的选择，试试吧，看看有无你喜欢的）
配合ajax，在执行之前使用，ajax请求成功后，必须用加载层私有方法将其关闭：layer.loadClose();
follow : ''
tips小提示层私有属性。msg：提示内容，follow：触发事件对应的选择器
tips的界面似乎戳了点，不过将就着用吧，实在不行就去layer.css改一下。
success : function(layer){}
层弹出成功后的回调函数
层展现后，你想必需要做一些其它的事件处理吧，那么，写在这里面
close : function(index){}
层右上角关闭按钮的回调函数。
想一下，有时点击关闭你是否需要做别的行为处理，那么，你应该写在这里面
end : function(){}
层被彻底关闭后执行的回调函数。
你认为她跟close回调相似？那你错了，close绑定的是关闭按钮的click事件，而end，只是单纯的一个回调，当设置了自动关闭时，它可能会派上用场不是？
新增的元素'); var index = layer.getIndex(this);
layer.autoArea(index); }); }
layer API之内置方法
layer.alert()
layer对象下的方法，对单个按钮信息框层的重新封装，layer.alert(alertMsg , alertType,
alertTit ,
alertYes),四个参数，alertMsg：信息内容（文本），alertType：提示图标（整数，0-10的选择），alertTit：标题（文本），alertYes：按钮的回调函数
如：layer.alert('前端攻城师贤心')
layer.confirm()
layer对象下的方法，对询问框的重新封装，layer.confirm(conMsg , conYes , conTit ,
conNo),四个参数，conMsg：信息内容（文本），conYes：按钮一回调，conTit：标题（文本），conNo：按钮二的回调
layer.confirm('确定删除',function(){
layer.msg('删除成功！')
layer.msg()
layer对象下的方法，对无标题栏信息框层的重新封装，layer.msg(msgText , msgTime ,
maxWidth),四个参数，msgText：信息内容（文本），msgTime：自动关闭所需等待秒数（默认2秒），msgType：提示图标（整数，0-10的选择），maxWidth：最大宽度
如：layer.msg('嗨，伙计，我是layer')
layer.tips()
layer对象下的方法，对tips层的重新封装，layer.tips(html , follow , time ,
maxWidth),四个参数，html：信息内容（文本），follow：触发事件对应的选择器，time：自动关闭所需等待秒数，maxWidth：最大宽度
$('.demo').click(function(){
layer.tips('这是小提示',this);
layer.load()
layer对象下的方法，对加载层的重新封装，layer.load(loadTime , loadgif ,
loadShade),三个参数，loadTime：自动关闭所需等待秒数，loadgif：加载图标（整数，0-3的选择），loadShade：是否遮罩（true
或 false）
如：layer.load(3);
layer.getIndex(index)
layer对象下的方法，开启页面层模式（type：1时）后才有用，用于获取layer的当前索引，从而协助通过非layer元素触发事件所执行的关闭方法
success : function(){
$('#test').click(function(){
var index = layer.getIndex(this);
layer.close(index);
layer.getChildFrame(selector)
layer对象下的方法，获取子iframe中的DOM
非常实用，父窗口操作iframe中内容时可以大显神威。如：layer.getChildFrame('body').html()
//得到iframe的body的全部html元素
layer.getFrameIndex()
layer对象下的方法，得到iframe层的索引，子iframe操作父窗口时使用
$('#a').click(function(){
var index = parent.layer.getFrameIndex();
parent.layer.close(index);
layer.close(index)
layer对象下的方法，用于在执行回调后关闭层
yes : function(index){
layer.close(index);
layer.msg('已删除');
layer.loadClose()
layer对象下的方法，用于关闭加载层，仅loading私有
layer.shift(type , rate)
layer弹出时内置动画，type：动画类型，供四种中选择，左上：'left-top',右上：'right-top',左下：'left-bottom',右下：'right-bottom'
。 rate:动画频率，毫秒
success : function(){
layer.shift('right-bottom' , 400);
layer.loadClose()
layer对象下的方法，用于关闭加载层，仅loading私有
layer.autoArea(index)
用来处理在层中宽高改变时，重新自适应层宽高。
success : function(){
$('#test').click(function(){
$(this).append('
layer.iframeAuto()
用于让iframe层自适应。
非常实用，详见官网实例演示之iframe子父操作。
本文内容来自：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。H+ 后台主题UI框架 - web弹层组件layer
layer是一款口碑极佳的web弹层组件，她具备全方位的解决方案，致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富而友好的操作体验。
在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer（已被1739623人次关注）。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。
layer遵循LGPL协议，将永久性提供无偿服务。历经三年，截至到日，已运用在10万余家web平台，其中包括中国联通、蚂蚁短租、慕课网、phpyun等等知名网站，如果您有大型项目也在使用layer，您可以联系作者，以便在此展现案例，也为您的品牌推广尽一些绵薄之力。
layer官网：
layer官网文档：
特别说明：事件需自己绑定，以下只展现调用代码。
parent.layer.alert('内容')
//第三方扩展皮肤
parent.layer.alert('内容', {
skin: 'layer-ext-moon' //该皮肤由友情扩展。关于皮肤的扩展规则，
parent.layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'], //按钮
shade: false //不显示遮罩
}, function(){
parent.layer.msg('的确很重要', {icon: 1});
}, function(){
parent.layer.msg('奇葩么么哒', {shift: 6});
parent.layer.msg('玩命提示中');
//墨绿深蓝风
parent.layer.alert('墨绿风格，点击确认看深蓝', {
skin: 'layui-layer-molv' //样式类名
}, function(){
parent.layer.alert('偶吧深蓝style', {
skin: 'layui-layer-lan',
shift: 4 //动画类型
parent.layer.open({
shade: false,
title: false, //不显示标题
content: $('.layer_notice'), //捕获的元素
cancel: function(index){
parent.layer.close(index);
this.content.show();
parent.layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构',{time: 5000});
parent.layer.open({
skin: 'layui-layer-rim', //加上边框
area: ['420px', '240px'], //宽高
content: 'html内容'
parent.layer.open({
skin: 'layui-layer-demo', //样式类名
closeBtn: false, //不显示关闭按钮
shadeClose: true, //开启遮罩关闭
content: '内容'
layer.tips('Hi，我是tips', '吸附元素选择器，如#id');
//iframe层
parent.layer.open({
title: 'layer mobile页',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: '/mobile/' //iframe的url
//iframe窗
parent.layer.open({
title: false,
closeBtn: false,
shade: [0],
area: ['340px', '215px'],
offset: 'rb', //右下角弹出
time: 2000, //2秒后自动关闭
content: ['http://www.zi-han.net', 'no'], //iframe的url，no代表不显示滚动条
end: function(){ //此处用于演示
parent.layer.open({
title: '很多时候，我们想最大化看，比如像这个页面。',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['1150px', '650px'],
content: 'http://www.zi-han.net'
var index = parent.layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
//loading层
var index = parent.layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
tips: [1, '#3595CC'],
time: 4000
//prompt层
parent.layer.prompt({
title: '输入任何口令，并确认',
formType: 1 //prompt风格，支持0-2
}, function(pass){
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text){
layer.msg('演示完毕！您的口令：'+ pass +' 您最后写下了：'+ text);
parent.layer.tab({
area: ['600px', '300px'],
title: 'TAB1',
content: '内容1'
title: 'TAB2',
content: '内容2'
title: 'TAB3',
content: '内容3'
$.getJSON('js/demo/photos.json', function(json){
layer.photos({
photos: json //格式见API文档手册页
更多示例请访问：匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。Layer使用 -
青松 - ITeye技术网站
博客分类：
先了解一下在web开发时候使用js要关闭弹出框的几个简单的应用
window.location.href、location.href 是本页面跳转
parent.location.href 是上一层页面跳转，也就是你在弹出时候的页面。
top.location.href是最外层的页面跳转，你懂得，在有iframe的时候你就知道他不会进入你的iframe的窗体
再就是你要从这个页面跳转到别的父级打开的页面window.parent.parent.location.href=“你定义要跳转的页面”
layer使用
本课题只探讨1.9以上的版本
看看基础参数项：调用时候用到的配置项如：layer.open({content: ''})layer.msg('', {time: 3})不需要所有都去配置，大多数都是可选的。其中layer.open、layer.msg是内置方法。
基础参数：
type - 基本层类型
type:Number，默认：0 5种提供层类型，信息框【0】，页面层【1】，iframe层【2】，加载层【3】，ips【4】层，若你采用layer.open({type: 1})方式调用，则type为必填项。
title：
title - 标题
类型：String/Array/Boolean，默认：'信息'
title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
content - 内容
类型：String/DOM/Array，默认：''
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：
如果是页面层
layer.open({
content: '传入任意的文本或html' //这里content是一个普通的String
layer.open({
content: $('#id') //这里content是一个DOM
//Ajax获取
$.post('url', {}, function(str){
layer.open({
content: str //注意，如果str是object，那么需要字符拼接。
如果是iframe层
layer.open({
content: '' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['', 'no']
如果是用layer.open执行tips层
layer.open({
content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
skin - 样式类名
类型：String，默认：''
skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。这是一个很好的切入点，意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有：layui-layer-lanlayui-layer-molv，未来我们还会选择性地内置更多，但更推荐您自己来定义。以下是一个自定义风格的简单例子
来源/api.html#layer.load
浏览: 7044 次
来自: 北京
实际使用中可能会封装对应的多个调用实现接口。
cclxfeng 写道默认账户 是 casuser 密码：Me ...
默认账户 是 casuser 密码：Mellon