1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="layui-v2.4.3/layui-v2.4.3/layui/css/layui.css"> 7 <script type="text/javascript" src="layui-v2.4.3/layui-v2.4.3/layui/layui.js"></script> 8 </head> 9 <body> 10 <button class="layui-btn" id="btn1">点击按钮弹窗</button> 11 <button class="layui-btn" id="btn2">alert弹窗</button> 12 <button class="layui-btn" id="btn3">confirm弹窗</button> 13 <button class="layui-btn" id="btn4">open-type=0[默认]</button> 14 <button class="layui-btn" id="btn5">open-type=1[页面层]</button> 15 <button class="layui-btn" id="btn6">open-type=2[iframe层]</button> 16 <button class="layui-btn" id="btn7">open-type=4[tips层]</button> 17 <button class="layui-btn" id="btn8">[tips层]</button> 18 </body> 19 <div id="content" style="background-color: #00bfbf;height: 100%; 100%;display: none">type=2的open弹出层</div> 20 <script> 21 layui.use(['layer','jquery'],function () { 22 // 定义使用jquery和layer 23 var $ = layui.jquery; 24 var layer = layui.layer; 25 // 弹窗 26 $("#btn1").click(function () { 27 layer.msg("弹出层",{icon:1}); 28 }) 29 $("#btn2").click(function () { 30 // 普通弹出层 31 // layer.alert("alert 弹出层"); 32 // 弹出带图标的 33 layer.alert("带图标的alert弹出层",{icon:4}); 34 }) 35 $("#btn3").click(function () { 36 layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){ 37 // 这里可以写点击确定以后的回调方法比如: 38 // alert("这是点击确定以后的回调方法" ); 39 // 或者直接跟layui的弹窗 40 layer.msg("这是点击确定以后的回调方法",{icon:1}); 41 layer.close(index);//关闭弹窗 42 }); 43 }) 44 // open核心方法弹出层 45 // type 类型为0 46 $("#btn4").click(function () { 47 layer.open({ 48 type:0, 49 // content:"默认弹出信息框[type=0]" 50 // 除了默认文字提示以外还可以跟html代码如: 51 content:"<p style='color: red'>默认弹出层样式</p>", 52 // 还可以添加图标属性 53 icon:1, 54 // title为标题属性 55 title:"标题属性", 56 // skin为弹出层的样式皮肤如: 57 skin:"layui-layer-lan", 58 // area为弹出层的宽高属性 59 area:['300px','200px'], 60 // 设置坐标用offset属性['top','left'] auto 为默认垂直水平居中 r为靠右 l为靠左 t靠顶部 b靠下(规则为:先左右后上下) 61 offset:['200px','100px'], 62 // offset:'rt', 63 // 关闭按钮样式 64 closeBtn:1,//0为不显示,1默认,2带有样式 65 // shade为弹出层的遮罩属性shade['透明度','颜色'] 66 shade:['0.1','black'], 67 // 点击遮罩层关闭弹出层属性true为是false为否 68 shadeClose:true, 69 // time为延时关闭0为不关闭,后面可以跟毫秒数 70 time:'2000', 71 // anim为动画属性后面跟属性1,2,3,4 72 // anim: 0 平滑放大。默认 73 // anim: 1 从上掉落 74 // anim: 2 从最底部往上滑入 75 // anim: 3 从左滑入 76 // anim: 4 从左翻滚 77 // anim: 5 渐显 78 // anim: 6 抖动 79 anim:'6', 80 // 显示窗口最大化最小化;其对应的弹出层type值为1,2有效 81 // maxmin:true, 82 }) 83 }) 84 // type类型为1 85 $("#btn5").click(function () { 86 layer.open({ 87 type:1, 88 // type为1可以使用选择器必须将内容层写到body外面;type为0只能使用字符安拼接的标签如: 89 content:$("#content"), 90 area:["300px","300px"], 91 maxmin:true, 92 // time:2000, 93 // 按钮btn属性作为弹出层的按钮;从而去触发另一个事件 94 btn:['确定','重置','取消'], 95 // 按钮居中用btnalign其值为c(居中),l(居左),r(居右) 96 // btnAlign:'c', 97 // 为按钮绑定事件 98 // 按钮一绑定事件方法如下: 99 yes: function(index, layero){ 100 layer.msg("按钮确定的回调"); 101 }, 102 // 按扭二的回调 103 // 按钮三和按钮二用同样的方法,绑定事件以此类推 104 btn2: function(index, layero){ 105 layer.msg("按钮重置的回调方法") 106 }, 107 btn3: function(index, layero){ 108 layer.msg("按钮取消的回调方法") 109 // 当return false 时点击按钮就不会关闭弹出层 110 return false 111 }, 112 // 右上角x按钮关闭的回调 113 cancel: function(){ 114 //右上角关闭回调 115 layer.msg("右上角关闭按钮的回调") 116 //return false// 开启该代码可禁止点击该按钮关闭 117 } 118 }) 119 }) 120 // type为2的open核心弹出层(iframe弹出层) 121 $("#btn6").click(function () { 122 layer.open({ 123 // 当type为2的时候content必须为url 124 type:2, 125 // content:'layer.tanchuang.html', 126 // content除了内部链接以外也可以使用外部链接如: 127 content:"http://www.baidu.com", 128 // 如果想去除滚动条可以使用这种样式 129 // content:["http://www.baidu.com",'no'], 130 area:['1200px','500px'], 131 }) 132 }) 133 // type为3的open核心弹出层 134 // tips类型为吸附层多用于教学提示 135 $("#btn7").click(function () { 136 layer.open({ 137 type:4, 138 content:["这是type=4的tips弹出层样式","#btn7"], 139 shadeClose:true, 140 // tips是属性为吸附层内容显示在元素的位置;如tips:1在元素下面 141 tips:1, 142 }) 143 }) 144 // 以下也是一种吸附层的弹出 145 $("#btn8").click(function(){ 146 layer.tips('只想提示地精准些', '#btn8'); 147 }) 148 }); 149 </script> 150 </html>