一个好用的jquery弹出层--layer

tengzhouboy

插件官方地址：http://xu.sentsin.com/jquery/layer/

layer API之键值（仅在需要时配置，未配置的会用默认）
键值对 描述 备注
skin : 0 层的皮肤编号，值为整数型。 目前默认只提供一种皮肤，当你按照样式规则新增皮肤时，你需配置该参数。
shade : [0.5 , \'#000\' , true] 控制遮罩。0.5：遮罩透明度，\'#000\'：遮罩颜色，true：是否遮罩（否：false）  
shadeClose : false 用来控制点击遮罩区域是否关闭层。(是：true) 实用
fix : true, 层是否固定。否：false 实用
move : [\'.xubox_title\' , true] 控制层拖拽。\'.xubox_title\'：拖拽绑定事件所在元素选择器（默认为标题栏），true：是否允许拖拽（否：false）  
type : 0, 层的类型。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）  
time : 0 自动关闭等待秒数，整数值 实用
border : [10 , 0.3 , \'#000\', true] 10：边框大小，0.3：边框透明度，\'#000\'：边框颜色，true：是否显示边框（否：false） 通过它您可以任意配置边框，如果你觉得她碍眼，你完全可以不输出她。
zIndex : 19891014 控制层堆叠顺序（z-index）。整数值，默认是贤心的生日。 合理设置它，可以避免与其它插件的z-index冲突
maxWidth : 400 最大宽度。整数值。 当宽度设为auto时才有用。
fadeIn : [300 , false] 控制层的渐显。300：渐显频率，false：是否开启渐显（默认不开启，true:开启） 这效果，有人爱、有人厌。 
dialog : {
    btns : 1,
    btn : [\'确定\',\'取消\'],
    type : 3,
    msg : \'\',
    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 : \'http://xu.sentsin.com\'} iframe层模式私有参数。src：要打开的网址 使用率非常高，尤其是对于喜欢用iframe的同学。
loading : {type : 0} 加载层私有属性。type：loading图标类型（提供了0-3的选择，试试吧，看看有无你喜欢的） 配合ajax，在执行之前使用，ajax请求成功后，必须用加载层私有方法将其关闭：LAYER.loadClose(); 
tips : {
    msg : \'\',
    follow : \'\'
}
tips小提示层私有属性。msg：提示内容，follow：触发事件对应的选择器 tips的界面似乎戳了点，不过将就着用吧，实在不行就去layer.css改一下。
success : function(layer){} 层弹出成功后的回调函数 层展现后，你想必需要做一些其它的事件处理吧，那么，写在这里面
close : function(index){} 层右上角关闭按钮的回调函数。 想一下，有时点击关闭你是否需要做别的行为处理，那么，你应该写在这里面
end : function(){} 层被彻底关闭后执行的回调函数。 你认为她跟close回调相似？那你错了，close绑定的是关闭按钮的click事件，而end，只是单纯的一个回调，当设置了自动关闭时，它可能会派上用场不是？
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 , msgType , 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(\'</div>新增的元素</div>\');
        var index = LAYER.getIndex(this);
        LAYER.autoArea(index);
    });
}

下面是一些示例：

自己写的一段可用的代码：

$("#btnId").click(function(){//btnId为触发弹出层的按钮ID
　　$.layer({
　　　　type : 1,
　　　　title : [\'新增图片内容\' , true],
　　　　offset : [\'30px\' , \'50%\'],
　　　　area : [\'855px\',\'350px\'],
　　　　page : {dom : \'#tt\'},
　　　　success : function(layer){
　　　　　　//加载层成功，绑定确定和关闭按钮
　　　　　　$(\'#div2Sure\').unbind(\'click\').bind(\'click\',function(){
　　　　　　　　var index = LAYER.getIndex(this);
　　　　　　　　LAYER.close(index);
　　　　　　});
　　　　　　$(\'#div2Close\').unbind(\'click\').bind(\'click\',function(){
　　　　　　　　var index = LAYER.getIndex(this);
　　　　　　　　LAYER.close(index);
　　　　　　});
　　　　}
　　});
});

官网上的示例：

//信息框一
$.layer({
    area : [\'auto\',\'auto\'],
    dialog : {msg:\'白菜级别前端攻城师贤心\',type : 8}	
});
//信息框二
$.layer({
    shade : [\'\',false],
    area : [\'auto\',\'auto\'],
    title : [\'\',false],
    dialog : {msg:\'前端攻城师贤心\'}	
});
//询问框
$.layer({
    shade : [\'\',false],
    area : [\'auto\',\'auto\'],
    dialog : {
        msg:\'您是如何看待前端开发？\',
        btns : 2, 
        type : 4,
        btn : [\'重要\',\'奇葩\'],
        yes : function(){
            layer.msg(\'您选择了重要。\',2,1);
        },
        no : function(){
            layer.msg(\'奇葩!!!\',2,4);
        }
    }
});
//页面层一
$.layer({
    shade : [\'\',false],
    type : 1,
    area : [\'auto\',\'auto\'],
    offset : [\'300px\',\'\'],
    border : [10 , 0.5 , \'#628C1C\', true],
    page : {dom : \'.layer_notice\'},
    close : function(index){
        LAYER.close(index);
        $(\'.layer_notice\').show();	
    }
});
//页面层二
$.layer({
    type : 1,
    title : [\'\',false],
    fix : false,
    offset:[\'50px\' , \'\'],
    area : [\'auto\',\'auto\'],
    shadeClose : true,
    page : {dom : \'#tong\'}
});
$(\'#tong\').live(\'click\',function(){
    var index = LAYER.getIndex(this); 
    LAYER.close(index);
});
//iframe层
$.layer({
    type : 2,
    closeBtn : [0,false],
    time : 5,
    iframe : {
        src : \'http://player.youku.com/player.php/sid/XMjY3MzgzODg0/v.swf\'
    },
    title : [\'\' , false],
    area : [\'500px\',\'300px\'],
    success : function(){ //层加载成功后进行的回调
        LAYER.shift(\'right-bottom\',1000); //浏览器右下角弹出
    },
    end : function(){ //层彻底关闭后执行的回调
        $.layer({
            type : 2,
            offset : [\'100px\' , \'\'],
            iframe : {
                src : \'http://xu.sentsin.com/about/\'
            },	
            area : [\'960px\',\'500px\']
        })
    }
});
//加载层
$.layer({
    type : 3,
    time : 2
});
//小tips层
$(\'.class\').click(function(){
	layer.tips(\'我爱你，你爱我吗？\' , this , 3);
});
信息框一：
layer.alert(\'一个很普通的信息框\');
信息框二：
$.layer({
    area : [\'auto\',\'auto\'],
    title : [\'\',false],
    dialog:{msg:\'信息框演示二\'}
});
信息框三：
layer.confirm(\'信息框演示三\',function(index){
    LAYER.close(index);
    layer.msg(\'信息框演示三\');
});
信息框四：
$.layer({
    fix : false,
    move : [\'\',false],
    shade : [\'\' , \'\' , false],
    area : [\'auto\',\'auto\'],
    dialog:{msg:\'这是一个既不能固定，又不能拖拽的层\'}
});
信息框之变脸：
var i = 0;
$.layer({
    dialog:{type:0,msg:\'<a href="javascript:;" id="setface">点击我，试试变脸</a>\'},
    success : function(layer){
        $(\'#setface\').unbind(\'click\').bind(\'click\',function(){
            var index = LAYER.getIndex(this);
            i++;
            layer.find(\'.xubox_msgico\').removeClass(\'xubox_msgtype\'+(i-1)).addClass(\'xubox_msgtype\'+i);
            i > 10 && LAYER.close(index);
        });
    },
    end : function(){
        i = 0;
    }
});
信息框六：
layer.msg(\'2秒后自动关闭\');

一：页面层之仿百度登录：
$.layer({
    type : 1,
    title : [\'\',false],
    closeBtn : [\'\',false],
    border : [\'\',\'\',\'\',false],
    area : [\'455px\',\'371px\'],
    page : {dom : \'#baidu\'}
});
$(\'#baidu\').live(\'click\',function(){
    var index = LAYER.getIndex(this); 
    LAYER.close(index);
});
二、页面层之图片：
$.layer({
    type : 1,
    title : [\'\',false],
    fix : false,
    offset:[\'50px\' , \'\'],
    area : [\'515px\',\'615px\'],
    page : {dom : \'#tong\'}
});
$(\'#tong\').live(\'click\',function(){
    var index = LAYER.getIndex(this); 
    LAYER.close(index);
});
三、页面层之淘宝：
$.layer({
    type : 1,
    title : [\'\',false],
    offset:[\'150px\' , \'\'],
    border : [\'\',\'\',\'\',false],
    area : [\'503px\',\'395px\'],
    page : {dom : \'#taobao\'}
});
$(\'#taobao\').live(\'click\',function(){
    var index = LAYER.getIndex(this); 
    LAYER.close(index);
});
一：iframe层之从左下角弹出
$.layer({
    type : 2,
    title : [\'\',false],
    iframe : {src : \'http://pic10.nipic.com/20101023/145234_134017065776_2.gif\'},
    area : [\'350px\' , \'466px\'],
    success : function(){
        LAYER.shift(\'left-bottom\',400);	
    }
});
二：iframe层之正中央
$.layer({
    type : 2,
    title : [\'天之痕三个人的时光-半抱琵琶版\',true],
    iframe : {src : \'http://www.tudou.com/v/Rvy0IbYmBrQ/&resourceId=0_04_05_99/v.swf\'},
    area : [\'750px\' , \'466px\'],
    offset : [\'100px\',\'\']
});
三：iframe层之子父操作
$.layer({
    type : 2,
    title : [\'iframe子父操作测试\',true],
    iframe : {src : \'iframe.html\'},
    area : [\'200px\' , \'206px\'],
    offset : [\'150px\',\'\'],
    close : function(index){
        alert(\'您得到了子窗口的所有文本：\' + LAYER.getChildFrame(\'body\').text());
        LAYER.close(index);
    }
}); 
子窗口操作父窗口：
$(\'#a\').click(function(){
	var index = parent.LAYER.getFrameIndex();
	parent.LAYER.close(index);	
}); 
加载层一：
$.layer({
    type : 3,
    time : 2
}); 或：layer.load(3,2);
加载层二：					
$.layer({
    type : 3,
    time : 2,
    shade : [\'\',\'\',\'\',false],
    border : [0,\'\',\'\',\'\',false],
    loading : {type : 3}
});
一：tips小提示层
layer.tips(\'嗨，朋友，更多效果你自己慢慢发现吧。\',this);
二：渐显弹出layer
$.layer({
    area : [\'\',\'auto\'],
    fadeIn : [500,true],
    dialog : {msg : \'嗨，朋友，更多效果你自己慢慢发现吧。\'}
});

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode