项目中用到的一个很友好的弹出提示窗口。结合ajax很丝滑的与后台交互数据。引入layer.min.js
layer.msg('你确定删除么？', {
time: 0 //不自动关闭
,btn: ['确定', '取消']
,yes: function(index){
url:"sjsCompanyApplyController.do?DelHolder",
data:{'id':id,'companyid':companyid},
type:"Post",
dataType:"json",
success:function(data){
layer.msg(data.msg);
error:function(data){
$.messager.alert('错误',data.msg);
layer.close(index);
阅读(...) 评论()2014年10月 Java大版内专家分月排行榜第二2014年9月 Java大版内专家分月排行榜第二2014年8月 Java大版内专家分月排行榜第二
2016年1月 Java大版内专家分月排行榜第三2014年12月 Java大版内专家分月排行榜第三2014年11月 Java大版内专家分月排行榜第三
2014年10月 Java大版内专家分月排行榜第二2014年9月 Java大版内专家分月排行榜第二2014年8月 Java大版内专家分月排行榜第二
2016年1月 Java大版内专家分月排行榜第三2014年12月 Java大版内专家分月排行榜第三2014年11月 Java大版内专家分月排行榜第三
2016年1月 Java大版内专家分月排行榜第一2015年12月 Java大版内专家分月排行榜第一2015年9月 Java大版内专家分月排行榜第一2015年8月 Java大版内专家分月排行榜第一
2016年3月 Java大版内专家分月排行榜第二2016年2月 Java大版内专家分月排行榜第二2015年11月 Java大版内专家分月排行榜第二2015年10月 Java大版内专家分月排行榜第二
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。layer一个可以让你想到即可做到的web弹窗（层）解决方案
当前版本：v1.4 （发布）
相关交流：(前端超级群)
(舞动JavaScript)
文件大小：70KB，下载次数：
layer(全称：jQuery-plugin-layer)，一个可以让你想到即可做到的web弹窗（层）解决方案（js组件），作者贤心（菜鸟级前端攻城师）。layer侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以让您的页面拥有更丰富与便捷的操作体验，而这，您只需在调用时简单地配置相关参数，即可轻松实现。
与同类弹出层组件相比，layer的优势明显，她尽可能地在以更少的代码展现出更强健的功能。layer格外注重性能的提升，采用面向对象的思想实现，在多层模式的回调处理中，具备其它多数层组件所没有的“独立不冲突”（已有人次关注新版layer）。您完全可以大可放心地在页面弹出任意数量的层，她们彼此不妨碍。当你问及她的兼容时，layer必须告诉你，她兼容了一切浏览器，包括古老的ie6。
layer公开了如此多的接口（api），这使得您可以DIY太多您需要的风格，尤其是页面层模式，意味着必要时您可以完全抛弃layer的现有皮肤，并用你的思维去勾勒她的衣着。
而问题在于，我必须中止“王婆卖瓜”的陈述。因为一切的不足或友好，都需要您在使用过程中去发现。
问：我用iframe层一直显示加载图标，是什么情况？
答：首先这并不算是layer的bug。你只需要给你的iframe页面设一个背景色，即可解决。
问：layer支持跨iframe操作吗？
答：答案是肯定的。layer提供了LAYER.getChildFrame(selector)和
LAYER.getFrameIndex()两个方法（使用说明详见api）。他们可以帮助你轻松实现iframe之间的操作，另外，当你需要在子
iframe操作父窗口时，请用parent对象，比如让iframe外弹出一个layer：parent.$.layer({})
问：我实在有太多的问题要问，怎么办？
答：在此不得不承认，贤心精力非常有限，而之所以开源layer，仅仅只是为了让朋友们在web开发中提供一些方便，尽管
这种帮助是微小的，尽管layer还并不够成熟。 但这种无私并不意味着它的作者就必须承担解答你一切疑问的责任。
因此，如果您真的喜欢layer，请您花些时间阅读api，并尽可能地自己去修正layer的bug。 ——贤心
先一睹她的部分模样？
点击以下各方框查看效果：
信息框一信息框二询问框页面层一页面层二iframe层加载层小tips层
//信息框一
area : ['auto','auto'],
dialog : {msg:'白菜级别前端攻城师贤心',type : 8}
//信息框二
shade : ['',false],
area : ['auto','auto'],
title : ['',false],
dialog : {msg:'前端攻城师贤心'}
shade : ['',false],
area : ['auto','auto'],
dialog : {
msg:'您是如何看待前端开发？',
btn : ['重要','奇葩'],
yes : function(){
layer.msg('您选择了重要。',2,1);
no : function(){
layer.msg('奇葩!!!',2,4);
//页面层一
shade : ['',false],
area : ['315px','auto'],
offset : ['300px',''],
border : [10 , 0.5 , '#628C1C', true],
page : {dom : '.layer_notice'},
close : function(index){
LAYER.close(index);
$('.layer_notice').show();
//页面层二
title : ['',false],
fix : false,
offset:['50px' , ''],
area : ['515px','615px'],
page : {dom : '#tong'}
$('#tong').live('click',function(){
var index = LAYER.getIndex(this);
LAYER.close(index);
//iframe层
closeBtn : [0,false],
iframe : {
src : '/player.php/sid/XMjY3MzgzODg0/v.swf'
title : ['' , false],
area : ['500px','300px'],
success : function(){ //层加载成功后进行的回调
LAYER.shift('right-bottom',1000); //浏览器右下角弹出
end : function(){ //层彻底关闭后执行的回调
offset : ['100px' , ''],
iframe : {
src : '/about/'
area : ['960px','500px']
//小tips层
$('.class').click(function(){
layer.tips('我爱你，你爱我吗？' , this , 3);
layer API之键值（仅在需要时配置，未配置的会用默认）
层的皮肤编号，值为整数型。
目前默认只提供一种皮肤，当你按照样式规则新增皮肤时，你需配置该参数。
shade : [0.5 , '#000' , true]
控制遮罩。0.5：遮罩透明度，'#000'：遮罩颜色，true：是否遮罩（否：false）
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，只是单纯的一个回调，当设置了自动关闭时，它可能会派上用场不是？
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对象下的方法，开启页面层后才有用，用于获取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提供了五种模式的层，分别为：信息框、页面层、iframe层、加载层、tips层。下面就此进行大致的演示，更多功能还需要您自己去实验发现。
使用组件时，请将layer整个文件夹放置您项目的任何一个目录下，只需引入layer.js或layer.min.js即可（别忘了引入jquery）
点击以下各方框查看效果：
信息框一信息框二信息框三信息框四信息框之变脸信息框六
信息框一：
layer.alert('一个很普通的信息框');
信息框二：
area : ['auto','auto'],
title : ['',false],
dialog:{msg:'信息框演示二'}
信息框三：
layer.confirm('信息框演示三',function(index){
LAYER.close(index);
layer.msg('信息框演示三');
信息框四：
fix : false,
move : ['',false],
shade : ['' , '' , false],
area : ['auto','auto'],
dialog:{msg:'这是一个既不能固定，又不能拖拽的层'}
信息框之变脸：
var i = 0;
dialog:{type:0,msg:''},
success : function(layer){
$('#setface').unbind('click').bind('click',function(){
var index = LAYER.getIndex(this);
layer.find('.xubox_msgico').removeClass('xubox_msgtype'+(i-1)).addClass('xubox_msgtype'+i);
i & 10 && LAYER.close(index);
end : function(){
信息框六：
layer.msg('2秒后自动关闭');
页面层之仿百度登录页面层之佟丽娅页面层之淘宝
一：页面层之仿百度登录：
title : ['',false],
closeBtn : ['',false],
border : ['','','',false],
area : ['455px','371px'],
page : {dom : '#baidu'}
$('#baidu').live('click',function(){
var index = LAYER.getIndex(this);
LAYER.close(index);
二、页面层之图片：
title : ['',false],
fix : false,
offset:['50px' , ''],
area : ['515px','615px'],
page : {dom : '#tong'}
$('#tong').live('click',function(){
var index = LAYER.getIndex(this);
LAYER.close(index);
三、页面层之淘宝：
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层之从左下角弹出iframe层之正中央iframe层之子父操作
一：iframe层之从左下角弹出
title : ['',false],
iframe : {src : '/234__2.gif'},
area : ['350px' , '466px'],
success : function(){
LAYER.shift('left-bottom',400);
二：iframe层之正中央
title : ['天之痕三个人的时光-半抱琵琶版',true],
iframe : {src : '/v/Rvy0IbYmBrQ/&resourceId=0_04_05_99/v.swf'},
area : ['750px' , '466px'],
offset : ['100px','']
三：iframe层之子父操作
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.load(3,2);
加载层二：
shade : ['','','',false],
border : [0,'','','',false],
loading : {type : 3}
tips小提示层渐显弹出layer
一：tips小提示层
layer.tips('嗨，朋友，更多效果你自己慢慢发现吧。',this);
二：渐显弹出layer
area : ['','auto'],
fadeIn : [500,true],
dialog : {msg : '嗨，朋友，更多效果你自己慢慢发现吧。'}
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。