layer弹层

摘要:
获得layer文件包后,解压并将layer整个文件夹存放到你项目的任意目录,使用时,只需引入layer.js即可。注意:引入layer.js前必须先引入jquery1.8或以上版本121//弹出一个提示层2layer.msg;1//弹出一个页面层2layer.open;1layer.open({2title:'KKMEX提示您:',3content:'请输入合约代码或购买数量!'4});1//询问框2layer.confirm('您是如何看待前端开发?',{3title:'KKMEX提示您:',4btn:['重要','奇葩']//按钮5},function(){6layer.msg;7},function(){8layer.msg;12});layer.confirm;单按钮相当于alert1layer.confirm("下单成功!

获得 layer 文件包后,解压并将layer 整个文件夹(不要拆分结构) 存放到你项目的任意目录,使用时,只需引入 layer.js 即可。

注意:引入layer.js前必须先引入jquery1.8或以上版本

1 <script src="jQuery的路径"></script> <!--你必须先引入jQuery1.8或以上版本 -->
2  <script src="layer.js的路径"></script>
1 //弹出一个提示层
2 layer.msg('hello');

layer弹层第1张

1 //弹出一个页面层
2 layer.open({
3 type: 2,
4 title: 'iframe父子操作',
5 maxmin: true,
6 shadeClose: true, //点击遮罩关闭层
7 area : ['800px' , '520px'],
8 content: 'test/iframe.html'
9     });
layer弹层第2张
1 layer.open({
2 title: 'KKMEX提示您:',
3 content: '请输入合约代码或购买数量!'
4 });

layer弹层第3张

1 //询问框
2 layer.confirm('您是如何看待前端开发?', {
3 title: 'KKMEX提示您:',
4 btn: ['重要','奇葩'] //按钮
5 }, function(){
6 layer.msg('的确很重要', {icon: 2});
7 }, function(){
8 layer.msg('也可以这样', {
9 time: 2000, //2s后自动关闭
10 btn: ['明白了', '知道了']
11 });
12         });

layer弹层第4张

layer.confirm("请确认建仓信息是否有误", {
                title: 'KKMEX提示您:',
                btn: ['确认','取消'] //按钮
            }, function(){
                tijiao();
            });

layer弹层第5张

单按钮相当于alert

1 layer.confirm("下单成功!", {
2 title: 'KKMEX提示您:',
3 btn: ['确认'] //按钮
4 }, function(){
5 location.href = "http://t.zoukankan.com/deal.php";
6 });                                                            

layer弹层第6张

1 //prompt层
2 layer.prompt({
3 title: '输入任何口令,并确认',
4 formType: 1 //prompt风格,支持0-2
5 }, function(pass){
6 layer.prompt({title: '随便写点啥,并确认', formType: 2}, function(text){
7 layer.msg('演示完毕!您的口令:'+ pass +' 您最后写下了:'+ text);
8 });
9         });

layer弹层第7张

例子:http://layer.layui.com/hello.html
http://www.layui.com/doc/modules/layer.html
编辑: by 小鬼PSer 2017-10-19 17:38:02

layer弹层第8张


免责声明:文章转载自《layer弹层》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇[SpringBoot] SpringApplication.run 执行流程linux应用之bugfree的安装及配置下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

Element-ui局部添加loading效果

Vue+element ui在加载表数据元素加载微调器=“el icon loading”时在测试过程中遇到问题:constloading=this$loading({lock://is与修改器相同text://ofv-loading图标目标:...

Vue中进行断点调试的两种方式(使用外部浏览器和VsCode Debug for Chrome 插件)

但是在Vue中如果想要进行调试时,如果是在js中调试的话,可以直接添加一个debugger,然后在浏览器中打开检查进行断点调试。比如:在Vue页面中,点击搜索按钮时搜索会触发handleQuery方法resetQuery(){this.resetForm;this.handleQuery();},其中调用了请求查询数据的方法handleQuery(){thi...

甲骨文ARM架构云服务器部署宝塔+.net 5.0

前言前段时间,甲骨文推出了一款采用ARM架构的免费服务器,可以申请永久免费的4核、24GB内存、4G带宽,非常棒。然而,由于ARM架构的CPU。例如,编译和安装MySQL 5.7是可以的,所以不需要麻烦。创建后,ssh被连接并切换到根帐户sudo-i II。安装宝塔。创建服务器。更新包并安装BBR后,您可以使用官方脚本yu_install-wget&...

将txt、csv等文本文件导入Hive

将txt、csv等文本文件导入Hive目录将txt、csv等文本文件导入Hive00.数据在虚拟机外01.启动hadoop、hdfs02.将文件放置在hdfs目录下03.登录hive并进入指定数据库04.根据文件创建表05.执行导入语句00.数据在虚拟机外如果数据在虚拟机内,请跳过此步,直接执行接下来的操作。...

boost的下载和安装(windows版)

1 Introduction boost是一个准C++标准库,相当于STL的延续和扩展。它的设计理念类似于STL,它使用泛型来最大化重用。对于2boost的下载和安装,我们可以在官方boost网站上下载最新的boost版本。因为boost库可以像标准库一样在多个平台上运行,所以它只以源代码的形式正式提供。这是因为boost windows的安装版本不仅与处理...

SAP OBA1 外币评估是基于财务目的,为了不影响报表而做的估算值,在月末进行评估,在下月初进行冲回。

评估报告按行项目显示结果。4.评估策略外币的未清项评估有三种策略:1)期末评估,下期初冲回。因此目前每年底改变外币汇率时进行外币余额和未清项的评估,不冲回。②资产负债表指定日,一般是一年的最后一天。③资产负债表准备评估。如果选择该项,则视为年结评估,不能产生冲销凭证。外币未清项评估是按借贷分别统计后做的调整凭证。...