layui 各个弹出层的使用方法
html代码复制可直接使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://www.layui.com/admin/std/dist/layuiadmin/layui/css/layui.css">
<script type="text/javascript" src="https://www.layui.com/admin/std/dist/layuiadmin/layui/layui.js"></script>
</head>
<body>
<button class="layui-btn" id="btn1">点击按钮弹窗</button>
<button class="layui-btn" id="btn2">alert弹窗</button>
<button class="layui-btn" id="btn3">confirm弹窗</button>
<button class="layui-btn" id="btn4">open-type=0[默认]</button>
<button class="layui-btn" id="btn5">open-type=1[页面层]</button>
<button class="layui-btn" id="btn6">open-type=2[iframe层]</button>
<button class="layui-btn" id="btn7">open-type=4[tips层]</button>
<button class="layui-btn" id="btn8">[tips层]</button>
</body>
<div id="content" style="background-color: #00bfbf;height: 100%;width: 100%;display: none">type=2的open弹出层</div>
<script>
layui.use(['layer','jquery'],function () {
// 定义使用jquery和layer
var $ = layui.jquery;
var layer = layui.layer;
// 弹窗
$("#btn1").click(function () {
layer.msg("弹出层",{icon:1});
})
$("#btn2").click(function () {
// 普通弹出层
// layer.alert("alert 弹出层");
// 弹出带图标的
layer.alert("带图标的alert弹出层",{icon:4});
})
$("#btn3").click(function () {
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
// 这里可以写点击确定以后的回调方法比如:
// alert("这是点击确定以后的回调方法" );
// 或者直接跟layui的弹窗
layer.msg("这是点击确定以后的回调方法",{icon:1});
layer.close(index);//关闭弹窗
});
})
// open核心方法弹出层
// type 类型为0
$("#btn4").click(function () {
layer.open({
type:0,
// content:"默认弹出信息框[type=0]"
// 除了默认文字提示以外还可以跟html代码如:
content:"<p style='color: red'>默认弹出层样式</p>",
// 还可以添加图标属性
icon:1,
// title为标题属性
title:"标题属性",
// skin为弹出层的样式皮肤如:
skin:"layui-layer-lan",
// area为弹出层的宽高属性
area:['300px','200px'],
// 设置坐标用offset属性['top','left'] auto 为默认垂直水平居中 r为靠右 l为靠左 t靠顶部 b靠下(规则为:先左右后上下)
offset:['200px','100px'],
// offset:'rt',
// 关闭按钮样式
closeBtn:1,//0为不显示,1默认,2带有样式
// shade为弹出层的遮罩属性shade['透明度','颜色']
shade:['0.1','black'],
// 点击遮罩层关闭弹出层属性true为是false为否
shadeClose:true,
// time为延时关闭0为不关闭,后面可以跟毫秒数
time:'2000',
// anim为动画属性后面跟属性1,2,3,4
// anim: 0 平滑放大。默认
// anim: 1 从上掉落
// anim: 2 从最底部往上滑入
// anim: 3 从左滑入
// anim: 4 从左翻滚
// anim: 5 渐显
// anim: 6 抖动
anim:'6',
// 显示窗口最大化最小化;其对应的弹出层type值为1,2有效
// maxmin:true,
})
})
// type类型为1
$("#btn5").click(function () {
layer.open({
type:1,
// type为1可以使用选择器必须将内容层写到body外面;type为0只能使用字符安拼接的标签如:
content:$("#content"),
area:["300px","300px"],
maxmin:true,
// time:2000,
// 按钮btn属性作为弹出层的按钮;从而去触发另一个事件
btn:['确定','重置','取消'],
// 按钮居中用btnalign其值为c(居中),l(居左),r(居右)
// btnAlign:'c',
// 为按钮绑定事件
// 按钮一绑定事件方法如下:
yes: function(index, layero){
layer.msg("按钮确定的回调");
},
// 按扭二的回调
// 按钮三和按钮二用同样的方法,绑定事件以此类推
btn2: function(index, layero){
layer.msg("按钮重置的回调方法")
},
btn3: function(index, layero){
layer.msg("按钮取消的回调方法")
// 当return false 时点击按钮就不会关闭弹出层
return false
},
// 右上角x按钮关闭的回调
cancel: function(){
//右上角关闭回调
layer.msg("右上角关闭按钮的回调")
//return false// 开启该代码可禁止点击该按钮关闭
}
})
})
// type为2的open核心弹出层(iframe弹出层)
$("#btn6").click(function () {
layer.open({
// 当type为2的时候content必须为url
type:2,
// content:'layer.tanchuang.html',
// content除了内部链接以外也可以使用外部链接如:
content:"http://www.baidu.com",
// 如果想去除滚动条可以使用这种样式
// content:["http://www.baidu.com",'no'],
area:['1200px','500px'],
})
})
// type为3的open核心弹出层
// tips类型为吸附层多用于教学提示
$("#btn7").click(function () {
layer.open({
type:4,
content:["这是type=4的tips弹出层样式","#btn7"],
shadeClose:true,
// tips是属性为吸附层内容显示在元素的位置;如tips:1在元素下面
tips:1,
})
})
// 以下也是一种吸附层的弹出
$("#btn8").click(function(){
layer.tips('只想提示地精准些', '#btn8');
})
});
</script>
</html>
原文来自于：https://www.cnblogs.com/lxc-bky/p/10064331.html
浙公网安备 33010602011771号