//信息框-例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. andoid 多线程断点下载

    本示例介绍在Android平台下通过HTTP协议实现断点续传下载. 我们编写的是Andorid的HTTP协议多线程断点下载应用程序.直接使用单线程下载HTTP文件对我们来说是一件非常简单的事.那么,多 ...

  2. 迪米特法則 Law of Demeter

    又稱為"最小知識"原則, 若對Law of Demeter做一個簡單總結: 任何對象的任何方法只能調用以下對象中的方法: (1) 該對象本身 (2) 所傳入的參數對象 (3) 它所 ...

  3. Struts2中Action对象的set方法和get方法调用规则

    Struts的Action是采用的是多实例多线程设计,而不是像Servlet那样采用单实例多线程设计,因此在struts中,一个请求就对应一个Action对象,个对象之间的数据相互之间互不干扰.没接到 ...

  4. MsysGit下GUI乱码问题解决

    在Windows下安装Git-preview-1.7.4后,使用中发现许多的乱码问题,感觉甚是不便.这是因为Git是在linux下开发的管理软件,而linux的编码方式是基于UTF-8的,所以移植到W ...

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

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

  6. sql 行列转换

    create table #test1(id int,name varchar(20), Q1 int, Q2 int, Q3 int, Q4 int) insert into #test1 valu ...

  7. 转载:.NET Memory Leak: XmlSerializing your way to a Memory Leak

    原文地址:http://blogs.msdn.com/b/tess/archive/2006/02/15/532804.aspx I hate to give away the resolution ...

  8. VB.Net遍历已安装的程序卸载信息

    Private Shared Function ProgramExists(ByVal pgName As String) As Boolean Dim temp As String = Nothin ...

  9. ssh整合(spring + struts2 + hibernate)xml版

    1.1分层 1.2jar节点 <dependencies> <dependency> <groupId>junit</groupId> <arti ...

  10. springboot 整合kafka

    本文介绍如何在springboot项目中集成kafka收发message. 1.先解决依赖 springboot相关的依赖我们就不提了,和kafka相关的只依赖一个spring-kafka集成包 &l ...