//信息框-例1
layer.alert('见到你真的很高兴', {icon: 6}); //信息框-例2
layer.confirm('你确定你很帅么?', {icon: 3}, function(index){
layer.close(index);
alert('自恋狂');
}); //信息框-例3
layer.msg('这是最常用的吧'); //信息框-例4
layer.msg('不开心。。', {icon: 5}); //信息框-例4
layer.msg('玩命卖萌中', function(){
//关闭后的操作
}); //页面层-自定义
layer.open({
type: 1,
title: false,
closeBtn: false,
shadeClose: true,
skin: 'yourclass',
content: '自定义HTML内容'
}); //页面层-佟丽娅
layer.open({
type: 1,
title: false,
closeBtn: false,
area: '516px',
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true,
content: $('#tong')
}); //iframe层-父子操作
layer.open({
type: 2,
area: ['700px', '530px'],
fix: false, //不固定
maxmin: true,
content: 'test/iframe.html'
}); //iframe层-多媒体
layer.open({
type: 2,
title: false,
area: ['630px', '360px'],
shade: 0.8,
closeBtn: false,
shadeClose: true,
content: 'http://player.youku.com/embed/XMjY3MzgzODg0'
});
layer.msg('点击遮罩任意处关闭'); //iframe层-禁滚动条
layer.open({
type: 2,
area: ['360px', '500px'],
skin: 'layui-layer-rim', //加上边框
content: ['http://layer.layui.com/mobile', 'no']
}); //加载层-默认风格
layer.load();
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000); //加载层-风格2
layer.load(1);
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000); //加载层-风格3
layer.load(2);
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000); //加载层-风格4
layer.msg('加载中', {icon: 16}); //打酱油
layer.msg('尼玛,打个酱油', {icon: 4}); //tips层-上
layer.tips('上', '#id或者.class', {
tips: [1, '#0FA6D8'] //还可配置颜色
}); //tips层-右
layer.tips('默认就是向右的', '#id或者.class'); //tips层-下
layer.tips('下', '#id或者.class', {
tips: 2
}); //tips层-左
layer.tips('左边么么哒', '#id或者.class', {
tips: [4, '#78BA32']
}); //tips层-不销毁之前的
layer.tips('不销毁之前的', '#id或者.class', {
tipsMore: true
}); //默认prompt
layer.prompt(function(val){
layer.msg('得到了'+val);
}); //屏蔽浏览器滚动条
layer.open({
content: '浏览器滚动条已锁',
scrollbar: false
}); //弹出即全屏
var index = layer.open({
type: 2,
content: 'http://www.layui.com',
area: ['300px', '195px'],
maxmin: true
});
layer.full(index); //正上方
layer.msg('灵活运用offset', {
offset: 0,
shift: 6
}); //还该列举什么呢
layer.msg('等我想想…');

案列实践

<a href="<?= url('/user/edit/' . $val->id) ?>" class="eve_edit" rel="popup2" title="会员资料修改" class="poplight" >资料修改</a>
<a href="<?= url('/user/frozen/' . $val->id ) ?>" title="选择冻结项" class="event_lock">冻结</a>

js代码书写

 $('.eve_edit').click(function() {
oplayer = layer.open({
type: 2,
title: $(this).attr('title'),
shadeClose: true,
shade: false,
maxmin: true,
area: ['60%', '80%'],
content: $(this).attr('href')
});
return false;
});

jquery插件layer的更多相关文章

  1. jquery 弹窗插件 layer

    jquery 弹窗插件 layer 官网:http://sentsin.com/jquery/layer/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD H ...

  2. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  3. 网站建设常用JQuery插件整理

    1.jQuery.lazyload 作用:延迟加载网站图片,常用于电商网站.图片展示网站,对于提高网站打开速度比较有效. 2.Owl Carousel 作用:图片滚动特效.响应式传送带插件,特点是支持 ...

  4. 弹出框插件layer使用

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...

  5. 元素视差方向移动jQuery插件-类似github 404页面效果

    原文地址:http://www.xuanfengge.com/shake.html 前言: 视差滚动,大家也许并不陌生.但是对于视差方向移动,你是否有见过效果呢?看官请进来瞧瞧~ demo : 轩枫阁 ...

  6. webpack 引入jquery和第三方jquery插件

    1.引入jquery jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可. index.html: <!DOCTYPE html> <html> ...

  7. 移动端下滑刷新插件(jQuery插件)

    由于在工作不能独自开发,而且为了给他们方便,自己写过不少的插件,不过今天刚好空闲,发出刚好完成的,移动端的下滑到底刷新插件.我不是很喜欢写插件给别人用,因为用起来自然是简单的,没什么难度,所以一起分享 ...

  8. js插件---layer.js使用体验是怎样

    js插件---layer.js使用体验是怎样 一.总结 一句话总结:只有jquery和js,没有css,使用各种弹出层掉用各种函数特别方便,特别简单,特别好用. 引入只需要引入这两个,css都不需要, ...

  9. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

随机推荐

  1. mysql用户操作

    一, 创建用户: 命令:CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明:username - 你将创建的用户名, host - 指 ...

  2. [转]微信小程序登录逻辑梳理

    本文转自:http://www.jianshu.com/p/d9996cafdb31 官方文档 文档相关地址: 用户登录 获取用户数据 用户数据的签名验证和加解密                   ...

  3. 【MSDN】 SqlServer DBCC解析

    汇总学习下SqlServer的DBCC指令. DBCC:Transact-SQL 编程语言提供 DBCC 语句以作为 SQL Server 的数据库控制台命令. 数据库控制台命令语句可分为以下类别. ...

  4. C++里创建 Trie字典树(中文词典)(三)(联想)

    萌新做词典第三篇,做得不好,还请指正,谢谢大佬! 今天把词典的联想做好了,也是比较low的,还改了之前的查询.遍历等代码.  Orz 一样地先放上运行结果: test1 ID : char : 件 w ...

  5. 【设计模式】template method(模板方法)-- 类行为型模式5.10

    1.意图 子类在不改变父类的算法结构的情况下,可以重定义算法的某些特定步骤 2.动机 模板方法用一些抽象的操作定义一个算法,子类重定义这些操作以提供具体的行为:步骤的顺序定了,但实现可以调整: 3.适 ...

  6. Spring Cloud Ribbon负载均衡配置类放在Spring boot主类同级增加Exclude过滤后报Field config in com.cloud.web.controller.RibbonConfiguration required a bean of type 'com.netflix.client.config.IClientConfig' that could not b

    环境: Spring Cloud:Finchley.M8 Spring Boot:2.0.0.RELEASE 目录结构: 可以看到代码第13行的注释,我已经在@ComponentScan注解中添加了E ...

  7. WinSock Socket 池

    之前在WinSock2.0 API 中说到,像DisConnectEx 函数这样,它具有回收SOCKET的功能,而像AcceptEx这样的函数,它不会自己在内部创建新的SOCKET,需要外部传入SOC ...

  8. 前端之CSS——CSS选择器

    一.CSS介绍 为什么需要CSS(CSS的作用)? 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改 ...

  9. jQuery登录倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  10. 转:如何利用已有的切片文件生成TPK

    Tpk是ArcGIS 10.1即将推出的一种新的数据文件类型,主要是用于将切片文件打包形成离线地图包.Tpk可以在ArcGIS Runtime中作为切片底图被加载.在ArcGIS 10.1中Tpk的生 ...