1.弹出组件
使用方法
1.作为独立组件使用：下载layer引入js文件，加载1.8版本以上的jQuery的js文件和layer.js文件
2.layui模块化使用：只需要引入layui中的css与js文件，在script中使用layui.use()加载模块即可
下载layer组件：
layer 弹出层组件 - jQuery 弹出层插件 (ilayuis.com)
解压后找js文件和css文件拷入
layer-v3.5.1\layer
layer-v3.5.1\layer\theme\default
2.独立组件使用
下载layer引入js文件，加载1.8版本以上的jQuery的js文件和layer.js文件
引入组件使用
<link rel="stylesheet" type="text/css" href="layer/layer.css">
<script src="js/jquery-3.6.1.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"></script>
<script>
layer.msg('hello');
</script>
3.layui模块化使用
只需要引入layui中的css与js文件，在script中使用layui.use()加载模块即可
<!-- 2.layui模块化使用-->
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<!--2.layui模块化使用-->
<script type="text/javascript">
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('hello');
});
</script>
4.基础使用（通过layui模块化的形式）
4.1type - 基本层类型
layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
这个弹出框是可以拖拽改变大小的
<script type="text/javascript">
layui.use('layer', function(){
var layer = layui.layer;
// layer.msg('hello');
/*信息框*/
layer.open({
type:0,
//系统标题
// title:false, //不显示标题
title:['标题','color:red;'],
content:"Hello"
});
});
</script>
<!--2.layui模块化使用-->
<script type="text/javascript">
layui.use('layer', function(){
var layer = layui.layer;
// layer.msg('hello');
/*信息框*/
/*
layer.open({
type:0,
//系统标题
// title:false, //不显示标题
title:['标题','color:red;'],
content:"Hello"
});
*/
/*页面层*/
/*
layer.open({
type:1,
title:"系统消息",
content:"<div style='height: 100px;width: 200px'>Hello</div>"
});
*/
/*iframe*/
/*
layer.open({
type:2,
title:"系统信息",
// content:'http://www.baidu.com'
//如果不想出现滚动条，可以这样子写
content:['http://www.baidu.com','no']
//area:'500px'设置宽，高度自适应
,area:['800px','400px']//设置宽高
});
*/
/*tips层*/
/*layer.open({
type:4,
//content:['内容','#id'] //数组第二项即吸附元素选择器或者DOM
content:['内容','#sp3']
});*/
});
</script>
4.2icon图标
/*icon图标*/
//eg1，可以传入0-6
layer.alert('酷毙了', {icon: 1});
//eg2，可以传入0-6
layer.msg('不开心。。', {icon: 5});
//eg3，可以传入0~2
layer.load(1); //风格1的加载
加载
实现：先弹出框，点击确认弹出下一个弹出框，否则则关闭当前弹出框
layer.msg('你愿意和我做朋友吗',{
time:0,//外面的消息框不会自动关闭
btn:['当然愿意','狠心拒绝'],//按钮
yes: function (index){//index是当前弹出框的下标
layer.close(index);//关闭当前弹出框
layer.msg('你好，新朋友',{
icon:6,//icon图标
btn:['开心','快乐']
});
}
});
想要关闭弹出层后会触发弹出效果：
//关闭弹出层会有效果
layer.msg('玩命加载中...',function (){
//关闭后的操作
layer.msg('->-...');
});
弹出.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出组件</title>
<!-- 1.引入组件使用 -->
<!-- <link rel="stylesheet" type="text/css" href="layer/layer.css">-->
<!-- <script src="js/jquery-3.6.1.js" type="text/javascript" charset="utf-8"></script>-->
<!-- <script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>-->
<!-- 2.layui模块化使用-->
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
使用 方式：
1.作为独立组件使用
在layer独立版本官网下载组件包，在需要使用layer的页面加载1.6以上的jQuery的js文件和layer.js文件
2.layui模块化使用
只需要引入layui中的css与js文件，在script中使用layui.use()加载模块即可
-->
<span>内容1</span>
<span>内容2</span>
<span id="sp3">内容3</span>
<span id="sp4">内容4</span>
<!--1.作为独立组件使用-->
<!-- <script type="text/javascript"></script>-->
<!-- <script>-->
<!-- layer.msg('hello');-->
<!-- </script>-->
<!--2.layui模块化使用-->
<script type="text/javascript">
layui.use('layer', function(){
var layer = layui.layer;
// layer.msg('hello');
/*信息框*/
/*
layer.open({
type:0,
//系统标题
// title:false, //不显示标题
title:['标题','color:red;'],
content:"Hello"
});
*/
/*页面层*/
/*
layer.open({
type:1,
title:"系统消息",
content:"<div style='height: 100px;width: 200px'>Hello</div>"
});
*/
/*iframe*/
/*
layer.open({
type:2,
title:"系统信息",
// content:'http://www.baidu.com'
//如果不想出现滚动条，可以这样子写
content:['http://www.baidu.com','no']
//area:'500px'设置宽，高度自适应
,area:['800px','400px']//设置宽高
});
*/
/*tips层*/
/*layer.open({
type:4,
//content:['内容','#id'] //数组第二项即吸附元素选择器或者DOM
content:['内容','#sp3']
});*/
/*icon图标*/
//eg1，可以传入0-6
// layer.alert('酷毙了', {icon: 1});
//eg2，可以传入0-6
// layer.msg('不开心。。', {icon: 5});
//eg3，可以传入0~2
// layer.load(1); //风格1的加载
/*
layer.msg('你愿意和我做朋友吗',{
time:0,//外面的消息框不会自动关闭
btn:['当然愿意','狠心拒绝'],//按钮
yes: function (index){//index是当前弹出框的下标
layer.close(index);//关闭当前弹出框
layer.msg('你好，新朋友',{
icon:6,//icon图标
btn:['开心','快乐']
});
}
});*/
//关闭弹出层会有效果
layer.msg('玩命加载中...',function (){
//关闭后的操作
layer.msg('->-...');
});
});
</script>
</body>
</html>
标签：学习,layer,layui,content,msg,弹出,组件,type From： https://www.cnblogs.com/hmy22466/p/17331926.html