航歌 - 做最好的开发者知识平台

留言首页

当前位置：
首页
>
编程社区
>
其他
> layer - 简单好用的Web弹出层组件使用详解6（弹出框的样式、参数设置）

layer - 简单好用的Web弹出层组件使用详解6（弹出框的样式、参数设置）

2018-06-05 发布：hangge 阅读：5307

十二、样式修改

1，标题样式（title）

（1）title 属性除了可以简单地设置标题文字外，还可以附带上相关的 CSS 样式。

layer.alert('欢迎访问 hangge.com', {
title: ["我是标题", "font-size:18px;color:orange"]
});

（2）也可以直接不显示标题栏。

layer.alert('欢迎访问 hangge.com', {
title: false
});

2，样式类名（skin）

（1）skin 属性可以传入 layer 内置的皮肤样式 class 名来改变整个弹出框的样式。下面分别是 layui-layer-lan、layui-layer-molv 和 layui-layer-hui 这三个 skin 效果。

layer.alert('欢迎访问 hangge.com', {
skin: 'layui-layer-molv'
});

（2）我们也可以自定义的 class 名，从而实现自定义风格。

<style>
.demo-class .layui-layer-title{background:orange; color:#fff; border: none;}
.demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
.demo-class .layui-layer-btn a{background:#333;}
.demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
</style>

<script>
layer.alert('欢迎访问 hangge.com', {
skin: 'demo-class'
});
</script>

3，宽高（area）

（1）默认情况下弹出框的宽高都自适应的。我们可以对宽度设置固定值，然后高度仍然自适应。

layer.alert('欢迎访问 hangge.com', {
area: '500px'
});

（2）也可以将宽高都设置为固定值。
layer.alert('欢迎访问 hangge.com', {
area: ['500px', '300px']
});

4，最大宽度（maxWidth）

（1）只有当 area: 'auto' 时，maxWidth 的设定才有效。

（2）maxWidth 默认值为：360

5，最大高度（maxHeight）

（1）只有当高度自适应时，maxHeight 的设定才有效。

（2）maxHeight 无默认值。

6，图标（icon）

通过 icon 配置属性我们可以在提示框内容前面显示个图片。根据传入的数字不同（0 ~ 6），共有如下 7 种图标。

layer.msg('欢迎访问 hangge.com', {
icon: 6
});

7，按钮排列方式（btnAlign）

（1）使用 btnAlign 属性可以设置按钮的对齐方式：

l：左对齐

c：居中对其

r：右对齐（默认值）

（2）下面将按钮改成居中对齐。

layer.confirm('确定要删除吗?', {
btnAlign:'c'
}, function(index){
//点击确定后的回调
//do something
layer.close(index);
});

8，关闭按钮样式（closeBtn）

（1）closeBtn 参数可以设置关闭按钮样式，具体可选值如下：

0：不显示关闭按钮

1：第一种样式（默认）

2：第二种样式

layer.alert('欢迎访问 hangge.com', {
closeBtn: 2
});

（2）三种情况下的显示效果分别如下：

9，遮罩背景（shade）

（1）默认情况下遮罩是 0.3 透明度的黑色背景。我们可以使用 shade 来修改透明度，比如下面改成完全不透明。

layer.alert('欢迎访问 hangge.com', {
shade: 1
});

（2）如果将 shade 设置为 0，则表示不需要遮罩（提示框变成非模态的）
layer.alert('欢迎访问 hangge.com', {
shade: 0
});

（3）也可以将将遮罩自定义成其他的颜色。

layer.alert('欢迎访问 hangge.com', {
shade: [0.8, '#393D49']
});

10，点击遮罩后关闭提示框（shadeClose）

默认情况下只有点击提示框上的关闭按钮才可以将其关闭，我们也可以将 shadeClose 设为为 true，从而实现点击弹层外区域（遮罩）也可以关闭提示框。

layer.alert('欢迎访问 hangge.com', {
shadeClose: true
});

11，自动关闭时间（time）

默认情况下弹出框不会自动关闭。我们可以使用 time 设置自动关闭时间，单位是毫秒（1秒 = 1000毫秒）

layer.alert('欢迎访问 hangge.com', {
time: 2000 //2秒后自动关闭
});

12，弹出层的唯一标识（id）

设置 id 值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和 iframe 层模式。

13，弹出框位置固定（fixed）

即鼠标滚动时，层是否固定在可视区域。默认为 true，表示不随视图的滚动而滚动。如果不想固定位置，设置 fixed: false 即可。

14，是否允许拉伸（resize）

默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对需要指定的弹层屏蔽该功能，设置 false 即可。

（注意：该参数对 loading、tips 层无效。）

15，是否允许浏览器出现滚动条（scrollbar）

scrollbar 属性允许浏览器滚动：

true：表示允许滚动（默认值）

false：屏蔽浏览器窗口滚动条（即原来页面如果有滚动条，弹出提示框时滚动条消失，关闭提示框滚动条又出现）

layer.alert('欢迎访问 hangge.com', {
scrollbar: false //弹出时屏蔽页面滚动条
});

16，层叠顺序（zIndex）

（1）zIndex 属性一般用于解决和其它组件的层叠冲突。

（2）zIndex 默认值为：19891014

17，拖动功能设置（move）

（1）move 默认值为 .layui-layer-title，表示触发标题区域的拖拽。比如我们可以改成在内容区域上可以拖动窗口。

layer.alert('欢迎访问 hangge.com', {
move: '.layui-layer-content' //改成在内容区域上可以拖动窗口
});

（2）我们也可以将 move 设定为 false 来禁止拖拽。
layer.alert('欢迎访问 hangge.com', {
move: false //弹出框无法拖动
});

18，是否允许拖拽到窗口外（moveOut）
（1）默认值为：false，表示只能在窗口内拖拽。
（2）如果想让提示框可以拖到窗口外，那么设定 moveOut: true 即可。

上一篇layer - 简单好用的Web弹出层组件使用详解5（弹出位置、出场退场动画）下一篇layer - 简单好用的Web弹出层组件使用详解7（常用的回调方法）

打赏支持

评论（0）

提交

文章类别

编程社区
SwiftFlex / FlashHTML5 / CSS3CordovaSpringBoot / CloudDocker / K8sReact / RN其他
奇文共赏

本类相关

Python - 基本数据类型详解1（整型、浮点型、布尔型、字符串）

如何创建以“.”开头的文件夹（以创建.well-known文件夹为例）

Python - macOS下Python开发环境的搭建教程（安装最新的3.X版本）

mysqlslap - MySQL自带的数据库压力测试工具使用详解（附样例）

CentOS - 增加新的SSH远程访问端口教程（附：防火墙端口转发到22端口）

Python - 基本数据类型详解2（列表、元组）

IIS - 解决设置的404页面对.php无效的问题（No input file specified.）

JS - 文件上传组件WebUploader使用详解6（图片上传1：带缩略图预览）

ios8的文件路径（app路径，document路径）

Vue.js - 引入static文件夹下的css文件（全局、scoped）

移动版给我留言打赏支持

© copyright 2006-2021 航歌. All rights reserved. 苏ICP备14040777号