php layui弹出修改功能,非常好用的弹出层 layer，常用功能demo，快速上手！

功能强大，实用，操作方便，文档齐全。

参数灵活，丰富。可以作为开发项目的公共模块，多处使用。

老文档地址：http://layer.layui.com/api.html 已经停止维护

常用功能代码demo：

layer-更懂你的web弹窗解决方案

function func1() {

layer.alert('内容');

}

function func2() {

layer.alert('内容', {

icon: 1,

skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅

});

}

function func3() {

//询问框

layer.confirm('您是如何看待前端开发？', {

btn: ['重要','奇葩'] //按钮

}, function(){

layer.msg('的确很重要', {icon: 1});

}, function(){

layer.msg('也可以这样', {

time: 2000, //2s后自动关闭

btn: ['明白了', '知道了']

});

});

}

function func4() {

//提示层

layer.msg('玩命提示中');

}

function func5() {

//墨绿深蓝风

layer.alert('墨绿风格，点击确认看深蓝', {

skin: 'layui-layer-molv' //样式类名

,closeBtn: 0

}, function(){

layer.alert('偶吧深蓝style', {

skin: 'layui-layer-lan'

,closeBtn: 0

,shift: 4 //动画类型

});

});

}

function func6() {

//捕获页

layer.open({

type: 1,

shade: false,

title: false, //不显示标题

content: $('.layer_notice'), //捕获的元素

cancel: function(index){

layer.close(index);

this.content.show();

layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 2000, icon:6});

}

});

}

function func7() {

//页面层

layer.open({

type: 1,

skin: 'layui-layer-rim', //加上边框

area: ['420px', '240px'], //宽高

content: 'html内容'

});

}

function func8() {

//自定页

layer.open({

type: 1,

skin: 'layui-layer-demo', //样式类名

closeBtn: 0, //不显示关闭按钮

shift: 2,

area: ['420px', '240px'], //宽高

shadeClose: true, //开启遮罩关闭

content: '内容'

});

}

function func9() {

//tips层

layer.tips('Hi，我是tips', $("#tips"));

}

function func10() {

//iframe层

layer.open({

type: 2,

title: 'layer mobile页',

shadeClose: true,

shade: 0.8,

area: ['380px', '90%'],

content: 'http://m.baidu.com' //iframe的url

});

}

function func11() {

//iframe窗

layer.open({

type: 2,

title: false,

closeBtn: 0, //不显示关闭按钮

shade: [0],

area: ['340px', '215px'],

offset: 'auto', //右下角弹出

time: 2000, //2秒后自动关闭

shift: 2,

content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条

end: function(){ //此处用于演示

layer.open({

type: 2,

title: '百度一下，你就知道',

shadeClose: true,

shade: false,

maxmin: true, //开启最大化最小化按钮

area: ['1150px', '650px'],

content: 'http://www.baidu.com'

});

}

});

}

function func12() {

//加载层

var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2

}

function func13() {

//loading层

var index = layer.load(1, {

shade: [0.1,'#fff'] //0.1透明度的白色背景

});

}

function func14() {

//小tips

layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', $('#tips2'), {

tips: [1, '#3595CC'],

time: 4000

});

}

function func15() {

//prompt层

layer.prompt({

title: '输入任何口令，并确认',

formType: 1 //prompt风格，支持0-2

}, function(pass){

layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text){

layer.msg('演示完毕！您的口令：'+ pass +' 您最后写下了：'+ text);

});

});

}

function func16() {

//tab层

layer.tab({

area: ['600px', '300px'],

tab: [{

title: 'TAB1',

content: '内容1'

}, {

title: 'TAB2',

content: '内容2'

}, {

title: 'TAB3',

content: '内容3'

}]

});

}

function openpage() {

layer.config({

extend: 'extend/layer.ext.js'

});

//页面一打开就执行，放入ready是为了layer所需配件(css、扩展模块)加载完毕

layer.ready(function() {

//官网欢迎页

layer.open({

type: 2,

skin: 'layui-layer-lan',

title: 'layer弹层组件',

fix: false,

shadeClose: true,

maxmin: true,

area: ['1000px', '500px'],

content: 'https://www.baidu.com'

});

layer.msg('欢迎使用layer');

});

}

初体验

皮肤

询问框

提示层

蓝色风格

捕捉页

页面层

自定义

tips层

iframe层

iframe窗

加载层

loading层

小tips

prompt层

tab层

openpage

tips

tips2

弹出层layer的使用

弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...

web 前端常用组件【07】弹出层 Layer

web 项目中总是需要弹出框,来让用户进行下一步的操作. 大到弹出另外一个页面,小到弹出提示.确认等. 经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到. 感 ...

jQuery弹出层layer插件的使用

引入插件layer 触发弹出层的按钮/链接

弹出层layer演示 以及在编写弹出层时遇到的错误

实现的功能: 首先第一步 在官方下载layer的文件.layUI官网:http://layer.layui.com/     http://layer.layui.com/ layer文件的下载步骤如 ...

layui 弹出层layer中from初始化 ,并在btn中返回from.data

1.弹出对话框 layer.open() 来初始化弹层 // 监听添加操作 $(".data-add-btn").on("click", function () ...

牛逼的 弹出层 layer ！！！

功能强大,实用,操作方便,文档齐全. http://layer.layui.com/api.html 常用功能代码:

layer弹出层 layer源码

下载源码:点击下载 ;!function(window, undefined){ "use strict"; var pathType = true, //是否采用自动获取绝对路径 ...

layui弹出层layer的area过大被遮挡

layer弹出窗口在弹出时指定了area,弹出后,如果当前页面(iframe)大小比弹出的窗口小,那么就会出现无法操作弹出窗口的尴尬情况.如图: 弹出窗口比当前页面大,这时,唯有放大整个页面才能看到 ...

【jq】插件—弹出层layer.js

layer.js包含了所有的层级情形,并且附加的有:tab层,相册层.webIM层. 适用于移动版本的layer.js   为layer for mobile 配套的layui 非常适合用于后台系统的 ...

随机推荐

树莓派安装Transmission-daemon出现的问题

1,安装时发现默认的源里面没有transmission-daemon包 pi@fynn:/etc/apt/sources.list.d $ sudo apt-get install transmiss ...

在EF的code frist下写稳健的权限管理系统：数据库模型(二)

先从数据库开始,因为是用EF的code frist,所以所有的设计都在解决项目中进行. 先是数据模型开始 我已经建立了四个模型,user,role,action,actiongroup user里面有 ...

canvas 绘制矩形

XXX(x,y,width,height)   x矩形左上角x坐标                                   y矩形左上角y坐标                       ...

如何改变hr颜色

html中用css改变颜色,

如果不加border:0 ...

【shell基础】if分支语句

1.if判断式if [ 条件判断一 ] && (||) [ 条件判断二 ]; thenelif [ 条件判断三 ] && (||) [ 条件判断四 ]; thenels ...

ios nil、NULL和NSNull 的使用

nil用来给对象赋值(Objective-C中的任何对象都属于id类型),NULL则给任何指针赋值,NULL和nil不能互换,nil用于类指针赋值(在Objective-C中类是一个对象,是类的met ...

Linux服务器 java生成的图片验证码乱码问题

问题:如图所示项目中生成的图形验证码不能正常显示出需要的字体 原因:  linux下没有对应的字体 查找项目中使用到系统字体的地方,如下: 解决: 1. 在本地 路径 C:\Windows\Fonts ...

【游记】NOIP2018 退役滚粗记

day0 早上6点半到机房 又复习了一下还没看的板子 刷了2道水题练手感 结果还是肛起了fgo 早上单抽出梅林 美滋滋 感觉把两天的RP都用光了 早上坐上了去福州的动车 一路上说说笑笑 自信满满 下午 ...

NoSQL数据库笔谈

NoSQL数据库笔谈 databases , appdir , node , paper颜开 , v0.2 , 2010.2 序 思想篇 CAP 最终一致性 变体 BASE 其他 I/O的五分钟法则 ...

java并发编程(7)构建自定义同步工具及条件队列

构建自定义同步工具 一.通过轮询与休眠的方式实现简单的有界缓存 public void put(V v) throws InterruptedException { while (true) { // ...