jQuery弹出层插件layer各种弹窗使用心得-jquery-网页制作-壹聚教程网jQuery弹出层插件layer各种弹窗使用心得
layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验,下面来看jQuery弹出层插件layer各种弹窗使用心得
&& 最近在开发一个项目，用到各种弹窗提示，包括弹窗等，我引用了layer插件，此插件功能全面强大，易用，为让新手快速上手，现总结如下
本文源码例子下载地址：
/s/1bnR9w7t
第一步，引入两个文件：
&script src=&/libs/jquery/2.1.4/jquery.min.js&&&/script&
&script src=&/libs/layer/2.1/layer.js&&&/script&
第二部,开始使用即可：
&strong style=&font-family: 'lucida Grande', Verdana, 'Microsoft YaHei'; font-size: 14 line-height: 21 white-space:&&&script&&br&&&& $(document).ready(function(){&br&&&&&&&& layer.msg('Hello layer');&&&&&&& layer.alert('见到你真的很高兴', {icon: 6});& //这里的参数6，童鞋们可以自己切换下1-6自己试试，所有需要的表情都有偶&br&&&& })&br&&/script&&br&&/strong&
当然此插件的强大远不止如此，下面就来详细的介绍下插件的其他功能和参数，这里就不一一介绍了，只介绍常用部分的参数,童鞋们最好自己手动下载一个试试。
//--简单的一个弹窗
layer.msg('Hello layer');
//--弹出自定义内容&
layer.open({
&&& type: 1,
&&& area: ['600px', '360px'],
&&& shadeClose: true, //点击遮罩关闭
&&& content: '\&\div style=&padding:20&&自定义内容\&\/div&'
//--弹出iframe指定网页内容---------------------
layer.open({
&&&&&&& type: 2,
&&&&&&& title: 'iframe父子操作',
&&&&&&& maxmin: true,
&&&&&&& shadeClose: true, //点击遮罩关闭层
&&&&&&& area : ['800px' , '520px'],& //窗口宽高
&&&&&&& content: 'test/iframe.html'
&&&&&&& offset: 0,&&& //非常重要的参数,和浏览器顶部的距离，这里单位是像素
&&&&&&& shift: 1&&&&& //这个是动画类型
offset: 这个参数十分重要，有时候感觉弹窗和底部的距离过大，就可以用这个调节
shift：从1.9开始，我们的出场动画全部采用CSS3。这意味着除了ie6-9（那程序猿们就的根据自己的客户群体来取舍是否启用这个属性），其它所有浏览器都是支持的。目前shift可支持的动画类型有0-6,童鞋们可以自己试下效果
我们可以在我们调用的子iframe页面，写
parent.layer.msg('Hi, man', {shade: 0.3});& //父页面弹窗
parent.$('#parentIframe').text('我被改变了');//改变父页面元素值
来从父页面发起弹窗，或者改变父页面的页面值
为了让页面有加载的感觉，我们还可以用
$(document).ready(function(){
&&& var ii = layer.load();
&&& //此处用setTimeout演示ajax的回调
&&& setTimeout(function(){
&&&&&&& layer.close(ii);
&&& }, 1000);
来显示加载中的效果。
//弹出一个tips层
layer.tips('Hello tips!', '#test5');
这个好像感觉不常用了，记得绑定一个元素的id名，和这里的#test5对应即可。
扩展方法（这个非常帅气）：
&script src=&layer.ext.js&&&/script&此文件，朕没有找到合适的CDN静态资源公共库，所以需要的童鞋，从这下载吧/s/1eRjeiIm引入了这个文件之后可以干什么呢，可以干如下帅气的事情：//--信息框------layer.prompt({&& formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）&& value: '初始值',&& title: '请输入值'}, function(value, index, elem){&& alert(value); //得到value&& layer.close(index);});这个效果可以用来做弹窗登陆功能，而不必用用户弹到另一个页面去登陆了
//--标签切换------------
layer.tab({
&&& area: ['600px', '300px'],
&&& tab: [{
&&&&&&& title: 'TAB1',
&&&&&&& content: '内容1'
&&&&&&& title: 'TAB2',
&&&&&&& content: '内容2'
&&&&&&& title: 'TAB3',
&&&&&&& content: '内容3'
这个呢是一个弹窗标签切换功能，嗯，童鞋们自己根据自己的实际情况来用吧。
至此，常用的功能就介绍完了。
上一页： &&&&&下一页：相关内容layer的prompt框怎么绑定回车键？ - Fly社区
layer的prompt框怎么绑定回车键？
 884
悬赏：5飞吻
layer.prompt({title: '请输入昵称'}, function(value){
layer.closeAll();
});这是一个很基本的prompt框，我现在只想输入后，不用鼠标，直接回车就可以确认，请问怎么实现？
layer.prompt({
&title&:&请输入昵称&,
&success&:function(){
$(&input.layui-layer-input&).on('keydown',function(e){
alert(&按键码为：& + e.which);
} }, function(value,index,element){
//这里你想做什么就做什么
layer.close(index); });
layer.prompt({
&title&:&请输入昵称&,
&success&:function(layero,index){
$(layero).find(&input[type='text']&).on('keydown',function(e){
alert(&按键码为：& + e.which);
} }, function(value,index,element){
//这里你想做什么就做什么
layer.close(index); });
@ 可是没写等于按键码等于13后，layer怎么关闭，而且我要获取prompt的值，比如这样layer.prompt({
&title&:&请输入昵称&,
&success&:function(){
$(&input.layui-layer-input&).on('keydown',function(e){
if(e.which === 13){
// 这里做什么
} }, function(value,index,element){
layer.close(index);
获取prompt的值
var name= });
看了下源码，好像不能加入success回调，不然重写了内置的逻辑，就会报错，要修改源码或者另想它法了
@ 不好使啊，你这个
 714
 332
 274
 245
 237
 217
 205
 175
 169
 160
 12
 10
 9
 8
 7
 6
 6
 6
 5
 5关于layer.prompt的问题 - Fly社区
关于layer.prompt的问题
 820
悬赏：5飞吻
如果我想实现layer.prompt的效果，但是弹出层的控件可以自定义，怎么实现呢？比如我弹出的层里含有2个文本框和一个下拉框，获取值得问题呢？我在layer.js里没有找到关于layer.prompt的原生定义，所以没有地方可以参考。不想使用iframe解决，因为影响了加载速度。
就是普通的页面层就可以了取里面的控件就普通 js、jq 的取法就可以每个弹出层都会返回弹出层 id，回调函数的参数也会有 layero（弹出层对象）和 layerindex（弹出层 id）详细的看文档吧。
恩恩额，管理员说得好
layer.prompt 这个在extend中定义的
 714
 332
 274
 245
 237
 217
 205
 175
 169
 160
 12
 10
 9
 8
 7
 6
 6
 6
 5
 5layer.prompt使用方法 - 程序园
博文评论:36
资源评论:122
积分与排名
阅读排行榜
layer.prompt使用方法
layer.js默认方法里面不含有layer.prompt方法，使用此方法需要引用扩展js,使用代码如下:
$(document).ready(function () {
layer.config({
extend: 'extend/layer.ext.js'
layer.ready(function () {
layer.prompt({
title: '输入消费密码，并确认',
formType: 1
}, function (str) {
if (str) {
//需要执行的方法
所属分类：
推荐成功关注成功
收藏成功消息已发发送
您可能还喜欢}