layer弹出层 清疚 2021-09-15 07:26 520阅读 0赞 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="layui/css/layui.css" media="all"> <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 --> </head> <body> <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;"> <button data-method="offset" data-type="t" class="layui-btn layui-btn-normal">上弹出</button> <button data-method="offset" data-type="r" class="layui-btn layui-btn-normal">右弹出</button> <button data-method="offset" data-type="b" class="layui-btn layui-btn-normal">下弹出</button> <button data-method="offset" data-type="l" class="layui-btn layui-btn-normal">左弹出</button> <button data-method="offset" data-type="lt" class="layui-btn layui-btn-normal">左上弹出</button> <button data-method="offset" data-type="lb" class="layui-btn layui-btn-normal">左下弹出</button> <button data-method="offset" data-type="rt" class="layui-btn layui-btn-normal">右上弹出</button> <button data-method="offset" data-type="rb" class="layui-btn layui-btn-normal">右下弹出</button> <button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">居中弹出</button> </div> <!-- 示例-970 --> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">扣分值</label> <div class="layui-input-block"> <input type="text" name="title" required lay-verify="number" placeholder="请输入标题" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">扣分人</label> <div class="layui-input-block"> <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">扣分原因</label> <div class="layui-input-block"> <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <script src="layui/layui.js" charset="utf-8"></script> <script> //Demo layui.use('form', function(){ var form = layui.form; //监听提交 form.on('submit(formDemo)', function(data){ layer.msg(JSON.stringify(data.field)); return false; }); }); </script> <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 --> <script> layui.use('layer', function(){ //独立版的layer无需执行这一句 var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句 //触发事件 var active = { offset: function(othis){ var type = othis.data('type') ,text = othis.text(); layer.open({ type: 2 ,offset: type //具体配置参考:http://www.layui.com/doc/modules/layer.html#offset ,id: 'layerDemo'+type //防止重复弹出 ,content: 'http://www.layui.com' ,btn: '关闭全部' ,btnAlign: 'c' //按钮居中 ,shade: 0 //不显示遮罩 ,area: ['380px', '100%'] ,yes: function(){ layer.closeAll(); } }); } }; $('#layerDemo .layui-btn').on('click', function(){ var othis = $(this), method = othis.data('method'); active[method] ? active[method].call(this, othis) : ''; }); }); </script> </body> </html>
还没有评论,来说两句吧...