Layer 弹出层组件
一、Layer是什么?
用于实现网页中的各种弹出层交互,
如
Alert/Confirm/Message/Tips/Page/Iframe/Loading/Prompt/Tab/photo 应有尽有
因为原生的alert、confirm等太丑了,因此我们使用layer的弹出层
二、快速使用
layer的文档:layer弹层组件开发文档 – Layui
layer下载地址:layer 弹出层组件 – jQuery 弹出层插件
1. 添加js和layer.js
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script src="/js/layer/layer.js"></script>
2.使用即可
2.1 alter
让弹窗变的好看
layer.alert("不能选择删除0条数据!")
2.2 msg
layer.msg(ret.msg, function () {
parent.close();
parent.refresh();
});
2.3 open
打开一个新的窗口
addorupdate:function (url,title) {
index= layer.open({
type:2,//代表是iframe
title:title, //标题
content:url, //不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同
area:['990px', '500px'],//宽高
closeBtn:1, //设置右上角的叉图标
anim:2 ,//设置动画
maxmin:true, //设置最大最小
fixed:true
})
},
2.4 full
让窗口全屏显示
index= layer.open({
type:2,//代表是iframe
title:title, //标题
content:url, //不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同
area:['990px', '500px'],//宽高
closeBtn:1, //设置右上角的叉图标
anim:2 ,//设置动画
maxmin:true, //设置最大最小
scrollbar:false,
fixed:true
})
//实现全屏
layer.full(index)
2.5 close
关闭
function close() {
layer.close(index);
}
今天的文章Layer 弹出层组件分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/31151.html