标签:平滑 精准 添加 位置 定义 cancel nal 放大 max
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
标签:平滑 精准 添加 位置 定义 cancel nal 放大 max
原文地址:https://www.cnblogs.com/xiong950413/p/14291453.html