首先引入文件 layui.CSS jquery.min.js layui.js
弹出层
data-method 后面的属性控制是什么弹窗, 在 js 中写方法
- <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
- <button data-method="setTop" class="layui-btn"> 多窗口模式, 层叠置顶 </button>
- <button data-method="offset" data-type="t" class="layui-btn layui-btn-normal"> 上弹出 </button>
- </div>
data-type 属性控制弹窗位置 参考文件 http://www.layui.com/doc/modules/layer.html#offset
- js
- // 模块
- layui.use('layer', function(){ // 独立版的 layer 无需执行这一句
- var $ = layui.jquery, layer = layui.layer; // 独立版的 layer 无需执行这一句
- // 触发事件
- var active = {
- // 这里是 data-method 的名称
- setTop: function(){
- var that = this;
- // 多窗口模式, 层叠置顶
- layer.open({
- type: 0 //0(信息框, 默认)1(页面层)2(iframe 层)3(加载层)4(tips 层). 若你采用 layer.open({type: 1}) 方式调用, 则 type 为必填项 (信息框除外)
- ,title: '这是蚊子标题'
- ,area: ['500px', '260px']// 弹窗大小
- ,shade: 0// 背景阴影
- ,maxmin: true
- ,offset: [ // 为了演示, 随机坐标
- Math.random()*($(window).height()-300)
- ,Math.random()*($(window).width()-390)
- ]
- ,content: '<div>aa</div>' // 内容与 type 有关, 当 type 为 2 时 内容只能为地址, 当 type 为 1 时, 可以为 id 值, 在页面中写好 div 设 id, 并隐藏.
- ,btn: ['继续弹出', '全部关闭','a'] // 按钮的文字, 可以在后面加按钮
- ,yes: function(){// 第一个按钮, 执行, 再次点击弹窗的效果.
- $(that).click();
- }
- ,btn2: function(){// 第二个按钮, 关闭所有.
- layer.closeAll();
- }
- ,zIndex: layer.zIndex // 重点 1
- ,success: function(layero){
- layer.setTop(layero); // 重点 2
- console.log(layero);
- }
- });
- }
- // 配置一个透明的询问框
- ,confirmTrans: function(){
- layer.msg('大部分参数都是可以公用的 < br > 合理搭配, 展示不一样的风格', {
- time: 20000, //20s 后自动关闭
- btn: ['明白了', '知道了', '哦']
- });
- }
- // 示范一个公告层
- ,notice: function(){
- layer.open({
- type: 1
- ,title: false // 不显示标题栏
- ,closeBtn: 0 // 是否有右上角的关闭按钮
- ,area: '500px;'// 大小
- ,shade: 0.8// 背景阴影
- ,id: 'LAY_layuipro' // 设定一个 id, 防止重复弹出
- ,btn: ['火速围观', '残忍拒绝']
- ,btnAlign: 'c' // 按钮居中
- ,moveOut:true
- ,moveType: 0 // 拖拽模式, 0 或者 1 //??????????
- ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"> 你知道吗? 亲!<br>layer layui<br><br>layer 只是作为 Layui 的一个弹层模块, 由于其用户基数较大, 所以常常会有人以为 layui 是 layerui<br><br>layer 虽然已被 Layui 收编为内置的弹层模块, 但仍然会作为一个独立组件全力维护, 升级.<br><br > 我们此后的征途是星辰大海 ^_^</div>'
- ,success: function(layero){
- var btn = layero.find('.layui-layer-btn'); // 按钮 1 增加跳转地址, 新开页面打开
- btn.find('.layui-layer-btn0').attr({
- href: 'http://www.layui.com/'
- ,target: '_blank'
- });
- }
- });
- }
- ,offset: function(othis){
- var type = othis.data('type')
- ,text = othis.text();
- layer.open({
- type: 1
- ,moveOut:false
- ,moveType: 0// 拖拽模式, 0 或者 1
- ,offset: type // 具体配置参考: http://www.layui.com/doc/modules/layer.html#offset
- ,id: 'layerDemo'+type // 防止重复弹出
- ,content: '<div style="padding: 20px 100px;">'+ text +'</div>'
- ,btn: '关闭全部'
- ,btnAlign: 'c' // 按钮居中
- ,shade: 0 // 不显示遮罩
- ,yes: function(){
- layer.closeAll();
- }
- });
- }
- };
- // 一定要写这句话不然不弹窗, 给弹窗按钮增加点击事件
- $('#layerDemo .layui-btn').on('click', function(){
- var othis = $(this), method = othis.data('method');
- active[method] ? active[method].call(this, othis) : '';
- });
- });
日期
来源: http://www.bubuko.com/infodetail-2685727.html