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

留言首页

当前位置：
首页
>
编程社区
>
其他
> layer - 简单好用的Web弹出层组件使用详解4（弹出自定义内容、iframe）

layer - 简单好用的Web弹出层组件使用详解4（弹出自定义内容、iframe）

2018-05-29 发布：hangge 阅读：2027

九、自定义弹出框内容

1，显示指定的 html 内容

（1）下面是最简单的用法，弹出框会根据内容自适应大小。

layer.open({
type: 1, //1:自定义内容 2:iframe
content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
});

（2）也可以指定弹出框大小。

layer.open({
type: 1, //1:自定义内容 2:iframe
area: ['500px', '200px'],
content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
});

2，显示 DOM 对象
content 也可以直接配置成页面上的 DOM 元素，并将其显示。
layer.open({
type: 1, //1:自定义内容 2:iframe
area: '516px',
content: $("#message") //显示id为message的元素
});

3，显示外部的 html 页面

（1）将 type 设置为 2 表示将一个 html 页面以 iframe 加载的形式弹出。

layer.open({
type: 2,
area: ['600px', '250px'],
content: 'detail.html'
});

（2）可以禁用嵌入页中的滚动条。

layer.open({
type: 2,
area: ['600px', '250px'],
content: ['detail.html', 'no']
});

4，添加按钮

弹出框支持添加无限个按钮，特别注意以下两点：

按钮 1 的回调是 yes，而从按钮 2 开始，则回调为 btn2、btn3...以此类推

按钮 1 点击后不会自动关闭提示框（之后的都会），如需关闭，需要调用 close 方法。

layer.open({
type: 1, //1:自定义内容 2:iframe
area: ['500px', '170px'],
content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>',
btn: ['按钮1', '按钮2', '按钮3'],
yes: function(){
alert("按钮1点击");
layer.closeAll(); //关闭所有弹出框
},
btn2: function(){
alert("按钮2点击");
},
btn3: function(){
alert("按钮3点击");
},
cancel: function(){
//右上角关闭回调
//return false 开启该代码可禁止点击该按钮关闭
}
});

5，最大化、最小化功能
将 maxmin 属性设置为 true 时，标题栏右侧会出现最大化、最小化按钮，点击后即可放大或缩小整个提示框。

layer.open({
type: 1, //1:自定义内容 2:iframe
area: ['500px', '200px'],
maxmin: true, //支持放大缩小
content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
});

6，多窗口模式

我们可以像 Windows 窗口那样，弹出多个提示框同时使用，要注意以下两点：

将背景遮罩隐藏，否则每次只能看到一个提示框。

点击某个提示框时要将其置顶，防止被其他提示框遮挡。

//循环弹出3个窗口
for(var i=0 ; i<3; i++){
layer.open({
type: 1, //1:自定义内容 2:iframe
area: ['300px', '150px'],
maxmin: true, //支持放大缩小
shade: 0, //不显示背景遮罩
offset: [ //为了演示，随机坐标
Math.random()*($(window).height()-300),
Math.random()*($(window).width()-390)
],
zIndex: layer.zIndex, //层叠顺序
success: function(layero){ //点击摸个弹出框时会调用
layer.setTop(layero); //置顶当前窗口
},
skin: "layui-layer-border",
content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
});
}

7，隐藏标题栏
我们还可以将提示框的标题、关闭按钮全部隐藏，只显示内容。要注意的是，由于没有关闭按钮，所以需要设置点击遮罩关闭提示框的功能。

layer.open({
type: 1, //1:自定义内容 2:iframe
title: false, //不显示标题
closeBtn: 0, //不显示关闭按钮
shadeClose: true, //点击外部遮罩自动关闭提示框
content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
});

8，修改样式

（1）通过 skin 配置属性我们可以设置提示框的样式。比如下面将提示框背景改成蓝色。

<style>
.yourclass {
background-color: #C1ECFF; /* 浅蓝色背景 */
}
</style>

<script>
window.onload = function() {

//显示自定义的提示框
layer.open({
type: 1, //1:自定义内容 2:iframe
title: false, //不显示标题
closeBtn: 0, //不显示关闭按钮
shadeClose: true, //点击外部遮罩自动关闭提示框
skin: 'yourclass', //弹出框样式
content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
});

}
</script>

（2）layer 也自带了一些样式供我们直接使用。比如下面给提示框外部加上边框。

//显示自定义的提示框
layer.open({
type: 1, //1:自定义内容 2:iframe
title: false, //不显示标题
closeBtn: 0, //不显示关闭按钮
shadeClose: true, //点击外部遮罩自动关闭提示框
skin: 'layui-layer-rim', //加上边框
content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
});

（3）下面是灰色样式皮肤。

layer.open({
type: 1, //1:自定义内容 2:iframe
skin: 'layui-layer-hui', //灰色皮肤
content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
});

附：一个弹出公告层样例

layer.open({
type: 1
,title: false //不显示标题栏
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
,resize: false
,btn: ['火速围观', '残忍拒绝']
,btnAlign: 'c'
,moveType: 1 //拖拽模式，0或者1
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; '
+ 'color: #fff; font-weight: 300;">欢迎访问hangge.com<br><br>喜欢就点个赞吧!</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').attr({
href: 'http://www.hangge.com/'
,target: '_blank'
});
}
});

上一篇layer - 简单好用的Web弹出层组件使用详解3（输入框、图片查看）下一篇layer - 简单好用的Web弹出层组件使用详解5（弹出位置、出场退场动画）

打赏支持

评论（0）

提交

文章类别

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

本类相关

jQuery - 多选择器的使用（一次选择多个元素）

jQuery - 第三方表格插件DataTables使用详解7（交替行、边框等样式设置）

JSONPlaceholder - 免费的在线REST服务（提供测试用的HTTP请求假数据）

MongoDB - 设置数据库的用户名和密码（开启登录密码认证）

SQLite - 获得表中的所有列名（字段名）

AvalonJs - 使用avalon.scan方法扫描指定区域

Rivets.js - 数据绑定和模板系统使用详解1（基本介绍、绑定器的使用）

ios - iPhone6和iPhone6 plus的iOS8设计尺寸（图标，文字，ui等）

替换Homebrew默认源（使用中科大镜像）

MySQL - ifnull ，if else ，case when等条件语句的用法和样例

移动版给我留言打赏支持

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