建网站问题谷歌广告代理

十二、样式修改

1，标题样式（title）

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

1 2 3

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

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

1 2 3

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

2，样式类名（skin）

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

1 2 3

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

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

1 2 3 4 5 6 7 8 9 10 11 12

<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）默认情况下弹出框的宽高都自适应的。我们可以对宽度设置固定值，然后高度仍然自适应。

1 2 3

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

（2）也可以将宽高都设置为固定值。

1 2 3

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 种图标。

1 2 3

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

7，按钮排列方式（btnAlign）

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

• l：左对齐
• c：居中对其
• r：右对齐（默认值）

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

1 2 3 4 5 6 7

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

8，关闭按钮样式（closeBtn）

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

• 0：不显示关闭按钮
• 1：第一种样式（默认）
• 2：第二种样式

1 2 3

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

9，遮罩背景（shade）

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

1 2 3

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

（2）如果将 shade 设置为 0，则表示不需要遮罩（提示框变成非模态的）

1 2 3

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

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

1 2 3

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

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

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

1 2 3

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

11，自动关闭时间（time）

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

1 2 3

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：屏蔽浏览器窗口滚动条（即原来页面如果有滚动条，弹出提示框时滚动条消失，关闭提示框滚动条又出现）

1 2 3

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

16，层叠顺序（zIndex）

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

（2）zIndex 默认值为：19891014

17，拖动功能设置（move）

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

1 2 3

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

（2）我们也可以将 move 设定为 false 来禁止拖拽。

1 2 3

layer.alert('欢迎访问 hangge.com', {   move: false  //弹出框无法拖动 });

18，是否允许拖拽到窗口外（moveOut）

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