今天空了学习一下弹出层

还是一步步展示把 首先，layer可以独立使用，也可以通过Layui模块化使用。我个人一直是用的模块化的 所以下面素有的都是基于模块化的。

引入好相关文件就可以开始啦  今天放图片把 试着学一下放图片

1.最简单的弹层，这个弹层的效果其实就是一个加了特效和样式的alert();代码如下：

<script>
layui.use("layer", function () {
var layer = layui.layer;
layer.msg("大家好，这是最简单的弹层");
});
</script>

以上直接放到HTML页面就OK。运行效果就出来了

效果就是这样了 他有一个默认的time基础参数 表示弹出来多久后自动关闭 默认好像是3000MS. time更改方法：layer.msg("大家好，这是最简单的弹层", {time:9000});

（设置为9S）.

下面看一下 可以设置的基础参数有哪些以及效果。

1.type-基本层类型

类型：Number，默认：0

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外

2.title-标题

title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false

title实例：

代码：layer.msg("大家好，这是最简单的弹层", { time: 9000, type: 1,title:['测试一下','font-size:18px'] });

可以看到出现了预想的效果。

3.content-内容

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。

第一种 ：页面层

这里要提到另外一个参数area  宽高

下面开始展示，弹出内容

代码：

<p id="p1">点我测试弹出层</p>

<script>
layui.use("layer", function () {
var layer = layui.layer;
//layer.msg("大家好，这是最简单的弹层", { time: 9000, type: 1,title:['测试一下','font-size:18px'] });
$("#p1").click(function () {
layer.open({
type: 1,
area: ['500px', '300px'],
content: '传入任意的文本或html' //这里content是一个普通的String
});
});
});
</script>

接下来  我们让他弹出一个DIV里面的内容

可以看到  div中的内容 成功弹出  这个我之前在项目中多用来绑定layui的table  中修改和新增 用弹层的方式好一点

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../layui/css/layui.css" rel="stylesheet" />
<script src="../layui/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
</head>
<body>
<p id="p1">点我测试弹出层</p>

<script>
layui.use("layer", function () {
var layer = layui.layer;
//layer.msg("大家好，这是最简单的弹层", { time: 9000, type: 1,title:['测试一下','font-size:18px'] });
$("#p1").click(function () {
layer.open({
type: 1,
area: ['500px', '300px'],
content: $("#test")
});
});
});
</script>
<!--我们在body中加入一个div，里面放入一个table-->
<div style="display:none" id="test">
<h1>来一个H1标题</h1>
<p> 你好哇 我是DIV里的内容</p>
<table border="1">
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
</table>
</div>
</body>
</html>

4.offset-坐标  默认垂直水平居中 这个一般也不会用到

layer.msg("skin的测试", { time: 9000, offset: ['100px', '50px']});  弹出来的位置发生变化 没了

5.icon-图标 信息框和加载层的私有参数

就是这个效果啦 其实真觉得LAYUI挺好呢

6.btn-按钮  接下来按钮 这个听常用的 也比较有意思了 come on

layer.open({
content: 'test'
, btn: ['按钮一', '按钮二', '按钮三']
, yes: function (index, layero) {
//按钮【按钮一】的回调
layer.msg("1的回调");
}
, btn2: function (index, layero) {
//按钮【按钮二】的回调
layer.msg("2的回调");
return false //开启该代码可禁止点击该按钮关闭
}
, btn3: function (index, layero) {
//按钮【按钮三】的回调
layer.msg("3的回调");
return false //开启该代码可禁止点击该按钮关闭
}
, cancel: function () {
//右上角关闭回调
layer.msg("4的回调");
//return false 开启该代码可禁止点击该按钮关闭
}
});

如描述 不同的btn可以对应不同的操作 这样你就可以在这些操作中做相应的接口为所欲为了

差不多 这些 个人认为比较重要的就是layer.open  页面层的调用 以及btn的=接口处理

Layui弹出层详解的更多相关文章

  1. layer弹出层详解

    前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并 ...

  2. layui弹出层之应用实例讲解

    从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...

  3. Layui 弹出层组件——layer的模块化开发实例应用

    Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...

  4. Layui弹出层、日期和时间选择、即时通讯、分页

    Layui弹出层.日期和时间选择.即时通讯.分页 弹层组件文档 - layui.layer 对于弹出层的感觉是:layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持. ...

  5. layui弹出层回调的使用

    <%@page language="java" contentType="text/html; charset=UTF-8"%> <%@ in ...

  6. layer/layui弹出层插件bug

    <button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...

  7. layui弹出层处理（获取、操作弹出层数据等）

    要点: 字符串被渲染为弹窗层之后,回自动转换为DOM,可以使用jq进行各种操作 <!DOCTYPE html> <html> <head> <meta cha ...

  8. adminlte+layui框架搭建3 - layui弹出层

    在amdinlte首页引入layui.js 和layui.css后添加代码 <script> layui.use(['layer'], function () { var layer = ...

  9. layui弹出层基础参数

    一.type-层类型 类型:Number  默认为0(信息框); 1(页面层),可以在页面添加HTML内容 2(iframe层) 3(加载层)加载时显示的弹出框 4(tips层) 需要绑定ID就不展示 ...

随机推荐

  1. 2020年了，IT外企还香吗？

    本来是刚发了<世上有不用加班的程序员吗?>,有朋友问到IT外企不加班福利好什么的,就回复了几句. 老王观点: 现在IT外企已经不值得羡慕了,08.09年那会,ibm,惠普还是香饽饽,当时人 ...

  2. ConcurrentHashMap源码解析，多线程扩容

    前面一篇已经介绍过了 HashMap 的源码: HashMap源码解析.jdk7和8之后的区别.相关问题分析 HashMap并不是线程安全的,他就一个普通的容器,没有做相关的同步处理,因此线程不安全主 ...

  3. 多测师_svn_004

    svn 版本控制工具项目管理中的版本控制问题:解决代码冲突困难容易引发bug难于恢复至正确版本无法进行权限控制项目版本发布困难 什么是版本控制是指维护工程蓝图的表座做法,能追踪工程蓝图从诞生到定案的过 ...

  4. 阿里百秀后台管理项目笔记 ---- Day01

    摘要 在此记录一下阿里百秀项目的教学视频的学习笔记,部分页面被我修改了,某些页面效果会不一样,基本操作是一致的,好记性不如烂笔头,加油叭!!! step 1 : 整合全部静态页面 将静态页面全部拷贝到 ...

  5. UDP协议网络Socket编程(java实现C/S通信案例)

    我的博客园:https://www.cnblogs.com/chenzhenhong/p/13825286.html 我的CSDN博客:https://blog.csdn.net/Charzous/a ...

  6. java中true不是关键字？

    java中true ,false , null在java中不是关键字,也不是保留字,它们只是显式常量值,但是你在程序中不能使用它们作为标识符. 其中const和goto是java的保留字.java中所 ...

  7. spring的xml文件的作用与实现原理

    1.Spring读取xml配置文件的原理与实现 https://www.cnblogs.com/wyq178/p/6843502.html 2.首先使用xml配置文件的好处是参数配置项与代码分离,便于 ...

  8. List集合，对象根据某个相同的属性，合并另外属性

    描述及实现: 1.List中有 Modular字段值有重复一样的2.Modular字段一样的话去重并且OrderAmount相加 HashMap<String,DataReport> te ...

  9. ORA-01078: failure in processing system parameters 问题的解决方法（oracle 11g）

    https://blog.csdn.net/lzwgood/article/details/26358725

  10. Redis学习笔记（六）——数据结构之Set

    一.介绍 Redis的Set是string类型的无序集合.集合成员是唯一的,这就意味着集合中不能出现重复的数据. Redis中集合是通过哈希表实现的,所以添加.删除.查找的复杂度都是O(1). 集合中 ...