layerjquery,layerjquery无效

jquery layer怎么弹出指定的html内元素

一个基本的弹出层应该满足以下需求：

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的话会消耗一定的性能，所以从性能角度考虑的话，我推荐使用本文提供的弹出层方式。

相关问答

Q1: layer是jquery插件吗

不是，也是一种js的插件，我们公司上个项目就用这个插件了，挺好用的，各种弹出层比自带的alert好看多了，值得推荐。

Q2: jquery layer插件,拓展模块layer.ext.js如何正确加载？

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的

Q3: layer和jquery是什么关系知乎

/*

先去官网下载最新的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

});

});