//信息框-例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. Ansible 介绍和使用

    简介 Ansible是一个简单的自动化运维管理工具,基于Python语言实现,由Paramiko和PyYAML两个关键模块构建,可用于自动化部署应用.配置.编排task(持续交付.无宕机更新等).主版 ...

  2. 移动端本地 H5 秒开方案探索与实现

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 企业微信移动端项目中有需求要展示数据趋势的可视化图表,经过调研,最终决定以单页面 H5 来完成,对 APP 里的一些使用 H5 实现的功能模 ...

  3. bzoj 5283: [CodePlus 2018 3 月赛]博弈论与概率统计

    Description 大家的好朋友小 L 来到了博弈的世界.Alice 和 Bob 在玩一个双人游戏.每一轮中,Alice 有 p 的概率胜利,1 -p 的概率失败,不会出现平局.双方初始时各有 0 ...

  4. WAMP环境配置-Mysql安装

    1.下载并解压MySQL5.6.36压缩包(顺便重命名一下子). 2.将my-default.ini文件复制一份改名为my.ini,然后修改下面红框标注的地方 3.安装与启动服务. 以管理员的身份运行 ...

  5. C# 获取字符串长度

    int leng = System.Text.Encoding.Default.GetBytes(attachfileId2).Length;

  6. 关于FileFOutputStream应用中的FileNotFoundException问题

    在使用fileoutputstream时经常出现FileNotFoundException问题,即便是同一个程序(可行)改了一下包名再重新编译,就会无缘无故的抛出FileNotFoundExcepti ...

  7. java应用程序已被安全设置阻止的解决办法(总有一个适合你)

    1. 在1月底的一次Java自动更新升级后,我点开已经配置好的Java小程序,赫然看到如下错误: 在网上查找了很多资料,发现就是此次更新的问题,解决方法如下: 控制面板—>Java—>安全 ...

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

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

  9. Android照片库选择图片裁剪闪退(兼容小米以及7.0以上机型)

    未经允许,禁止

  10. bean 的生命周期

    就是在new ClassPathXMLApplicationContext 的时候是否就直接在内存中new 出来,如果是对象比较的情景下 ,为了提高程序初始化的速度,可以用用. 如果设置为 true ...