189 8069 5689
一个基本的弹出层应该满足以下需求：
我们提供的服务有：做网站、成都网站制作、微信公众号开发、网站优化、网站认证、安图ssl等。为上1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的安图网站制作公司
1、点击按钮/链接触发弹出层，弹出层应该有半透明的遮罩层；
2、点击弹出层的关闭按钮、取消按钮或者遮罩层会关闭隐藏弹出层；
3、使用Esc键也可以关闭弹出层；
4、它是响应式的，并且兼容现代主流浏览器。
HTML
1、首先我们在页面放置一个用来触发弹出层的链接，也可以是个按钮button，注意的是我们给它设置一个data-show-layer属性，这个属性值对应的就是弹出层的id，也就是说通过data-show-layer来关联弹出层。
2、很显然，上面的链接关联的弹出层的id是hw-layer。那好，选择我们来准备弹出层hw-layer的html代码。
3、我们弹出层的最外层，也就是遮罩层.hw-overlay，我们会使用CSS控制它是一个半透明的层，用来隔开弹出层和页面主体内容。r然后在.hw-layer-wrap主体层内，我们可以设置弹出层的内容，当然内容由你来定，我们本文结合实例弹出层的内容是一个确认对话框，类似window的confirm()。内容使用了bootstrap的col-*栅格布局，还用了glyphicon字体图标。其实最关键的就是需要遮罩层和主体层，内容可以根据项目需求自定义，因为它可能是个表单、也可能是个纯文字说明的内容。
CSS
1、CSS也是关键的部分，我们先设置遮罩层，它默认情况下应该是不可见的，位置上fixed固定的，并且是覆盖整个页面的，它还是半透明的，我们这里设置了背景黑色、透明度0.3，如background-color: rgba(0,0,0,0.3)。然后主体层.hw-layer-wrap，我们设置它的宽度，计算它的位置。宽度我们可以预设一个值，高度由于内容多少不确定，这里我们不用设置一个具体的值，在后面的js部分会对高度处理，然后设置居中以及边框阴影等效果。有关水平和垂直居中的设置可以参阅Helloweba文章：如何让DIV水平和垂直居中。弹出层里面的内容样式可以自由设置，最后就是使用media query来设置小屏幕下的弹出层居中的问题。
2、我们使用jQuery来处理触发弹出层和关闭弹出层效果，应此需要预先加载jQuery库。showLayer(id)是一个自定义的函数，用来展示弹出层。当点击按钮或链接调用这个showLayer(id)函数，它会渐现的效果展示，并且计算弹出层的高度位移距离，使得弹出主体层水平和垂直方向的居中。而函数hideLayer()就是隐藏弹出层，fadeOut()或者hide()就能实现。最后再加上触发遮罩层的时候关闭弹出层以及使用Esc按钮的时候关闭弹出层的代码。
3、其实到这里，一个基本的弹出层效果已经做好了。我们这里只是做一个基本的弹出层，你也可以进行继续扩展代码。我们看过很多弹出层插件，很多都是动态直接操作DOM的，也就是通过js代码先createElement，然后在将内容append到body里的，这种方式如果是频繁操作DOM的话会消耗一定的性能，所以从性能角度考虑的话，我推荐使用本文提供的弹出层方式。
不是，也是一种js的插件，我们公司上个项目就用这个插件了，挺好用的，各种弹出层比自带的alert好看多了，值得推荐。
jquery layer插件,拓展模块layer.ext.js正确加载需要进行全局配置。
解决方法如下：
layer.config(options) - 初始化全局配置
这是一个可以重要也可以不重要的方法，重要的是，它的权利真的很大，尤其是在模块化加载layer时，你会发现你必须要用到它。它不仅可以配置一些诸如路径、加载的模块，甚至还可以决定整个弹层的默认参数。而说它不重要，是因为多数情况下，你会发现，你似乎不是那么十分需要它。但你真的需要认识一下这位伙计。
如果您是采用seajs或者requirejs加载layer，你需要执行该方法来完成初始化的配置。
如果你是采用script src="?a.jslayer.js"这种合并的方式引入layer，那么您需要在script标签上加一个自定义属性merge="true"。
layer.ready(path, callback) - 初始化就绪
由于我们的layer内置了轻量级加载器，所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时，layer.ready()会是一个不错的帮手。它也可以做一些layer.config可以做的事，比如指向layer.js所在目录。但是如果你已经通过layer.config配置了path，你在使用layer.ready时，是不需要path的
/*
先去官网下载最新的js
①引用jquery
②引用layer.min.js
*/
触发弹层的事件可自由绑定，如：
$('#id').on('click', function(){
layer.msg('test');
});
下面主要贴出上述例子的调用代码：
【信息框】：
layer.alert('白菜级别前端攻城师贤心', 8); //风格一
layer.msg('前端攻城师贤心'); //风格二
//当然，远远不止这两种风格。
【询问框】：
$.layer({
shade: [0],
area: ['auto','auto'],
dialog: {
msg: '您是如何看待前端开发？',
btns: 2,
type: 4,
btn: ['重要','奇葩'],
yes: function(){
layer.msg('重要', 1, 1);
}, no: function(){
layer.msg('奇葩', 1, 13);
}
}
});
//还可用layer.confirm()快捷调用
【页面层一】
$.layer({
type: 1,
shade: [0],
area: ['auto', 'auto'],
title: false,
border: [0],
page: {dom : '.layer_notice'}
});
【页面层二】
var pageii = $.layer({
type: 1,
title: false,
area: ['auto', 'auto'],
border: [0], //去掉默认边框
shade: [0], //去掉遮罩
closeBtn: [0, false], //去掉默认关闭按钮
shift: 'left', //从左动画弹出
page: {
html: 'div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background-color:#eee;"p我从左边来，我自定了风格。/pbutton id="pagebtn" class="btns" onclick=""关闭/button/div'
}
});
//自设关闭
$('#pagebtn').on('click', function(){
layer.close(pageii);
});
【iframe层一】
$.layer({
type: 2,
shadeClose: true,
title: false,
closeBtn: [0, false],
shade: [0.8, '#000'],
border: [0],
offset: ['20px',''],
area: ['1000px', ($(window).height() - 50) +'px'],
iframe: {src: ''}
});
【iframe层二】
layer.tips('5秒后右下角窗口自动关闭，并生成一个新的iframe', this, {
time: 5,
maxWidth: 260
});
$.layer({
type: 2,
closeBtn: false,
shadeClose: true,
shade: [0.1, '#fff'],
border: [0],
time: 5,
iframe: {
src: 'test/guodu.html'
},
title: false,
area: ['300px','250px'],
shift: 'right-bottom',
end: function(){
$.layer({
type : 2,
title: '贤心博客 - sentsin.com',
shadeClose: true,
maxmin: true,
fix : false,
area: ['1024px', 500],
iframe: {
src : ''
}
});
}
});
【加载层一】
layer.load(3);
【加载层二】
layer.load('加载带文字', 3);
【tips层一】
layer.tips('tips的样式并非是固定的，您可自定义外观。', this, {
style: ['background-color:#78BA32; color:#fff', '#78BA32'],
maxWidth:185,
time: 3,
closeBtn:[0, true]
});
【tips层二】
layer.tips('默认没有关闭按钮', this , {guide: 1, time: 2});
【输入/文件层】
//普通文本
layer.prompt({title: '您的名字？'}, function(name){
alert(name);
});
//密码文本
layer.prompt({title: '输入任何口令，并确认',type: 1}, function(pass){
alert(pass);
});
//文件上传
layer.prompt({title: '随便上传个东东，并确认',type: 2}, function(file){
alert(file);
});
//多行文本
layer.prompt({title: '随便写点啥，并确认',type: 3}, function(val){
alert(val);
});
【tab层】
layer.tab({
area: ['1000px', '500px'],
data: [
{title: 'Say', content:'Hi，Main'},
{title: '无题', content:'支持html传入'}
]
});
【相册层】
//此处为异步请求模式，具体的json格式，请等待文档更新。或者你直接通过请求看photos.json
var conf = {};
$.getJSON('ajax地址', {}, function(json){
conf.photoJSON = json; //保存json，以便下次直接读取内存数据
layer.photos({
html: '这里传入自定义的html，也可以不用传入（这意味着不会输出右侧区域）。相册支持左右方向键、Esc关闭',
json: json
});
});