layer弹窗常用

免初始化静态库推荐

cdn.bootcss.com/layer/3.0.1/layer.min.js

static.qvnidaye.com:81/layui/layui.all.js

=======================================


layer.confirm('一个月只能申请5次修改\n' +

'审核将会在7个工作日内完成,请确认是否提交修改申请?', {

btn: ['确定','取消'], //按钮

title:'提示',

}, function(){

console.log('点了确定');


layer.msg('修改成功', {icon: 1,time:1500,end:function () {

// window.location.href="<?=url('miniapp/index')?>"; //跳转到指定页面

window.location.reload(); // 刷新页面

}});


layer.msg(info, {icon: 2,time:1800});


}, function(){

layer.closeAll(); // 关闭弹窗

});


备注:icon 1 打勾,2 打叉。



layer.msg('请先输入功能介绍'); //没有带icon的msg,是灰色透明的弹窗



layer.alert('测试'); // 带头部和确认的弹窗



layer.msg('提示内容', {icon: 2,time:1800}); //默认是2秒关闭。 没带确认键的弹窗



layer.alert('一次只能添加一个类目',{title:'提示'}); // 带头部和确认的弹窗,自定义title



var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2


layer.load(0, {shade: [0.1,'#fff']}); //0代表加载的风格,支持0-2 有透明层不能点击


layer.closeAll('loading'); // 关闭加载框


 


弹窗中加入代码

layer.open({

type: 1,

title: '打印预览',

skin: 'layui-layer-rim', //加上边框

area: ['726px', '595px'], //宽高

content: $(this).siblings('.print_box')

})



//iframe窗

layer.open({

type: 2, //type=2是打开页面地址,type=1是打开html标签

title: false,

closeBtn: 0, //不显示关闭按钮

shade: [0],

area: ['340px', '215px'],

offset: 'rb', //右下角弹出

time: 2000, //2秒后自动关闭

anim: 2,

content: ['test/guodu.html', 'no'], //iframe的url,no代表不显示滚动条

end: function(){ //此处用于演示


}

});


layer.open({

type: 1,

title: '很多时候,我们想最大化看,比如像这个页面。',

shadeClose: true, // 点击蒙层是否可关闭

shade: false, //背景蒙层,0.4

maxmin: true, //开启最大化最小化按钮

area: ['893px', '600px'],

content: '//fly.layui.com/' // 或 $('#content')

});



//按钮设置

//eg1       

layer.confirm('纳尼?', {

  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮

  ,btn3: function(index, layero){

    //按钮【按钮三】的回调

  }

}, function(index, layero){

  //按钮【按钮一】的回调

}, function(index){

  //按钮【按钮二】的回调

});

//eg2

layer.open({

  content: 'test'

  ,btn: ['按钮一', '按钮二', '按钮三']

  ,yes: function(index, layero){

    //按钮【按钮一】的回调

  },btn2: function(index, layero){

    //按钮【按钮二】的回调

  },btn3: function(index, layero){

    //按钮【按钮三】的回调

  }

  ,cancel: function(){ 

    //右上角关闭回调

  }

});

      

      


鼎云博客
  • 最新评论
  • 总共0条评论