官方文档http://layer.layui.com/
https://cdn.bootcss.com/layer/2.3/layer.js
https://github.com/logoove/jqueryplus/blob/master/layer/layer.css不需要加载图片了,已经base64

layer.alert('内容');
layer.alert('内容', {
  icon: 1//1蓝色对号 2红色错误 3橙色问号4灰色锁 5红色哭脸
})

layer.msg('玩命提示中');
0文本1密码2文本域
 layer.prompt({title: '请输入', formType: 0}, function(text, index){
           layer.msg(text);
       });
//询问框

layer.confirm('您是如何看待前端开发?', {
  btn: ['重要','奇葩'] //按钮
}, function(){
  layer.msg('的确很重要', {icon: 1});
}, function(){
  layer.msg('也可以这样', {
    time: 20000, //20s后自动关闭
    btn: ['明白了', '知道了']
  });
});
//捕获页

layer.open({
  type: 1,
  shade: false,
  title: false, //不显示标题
  content: $('.layer_notice'), //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
  cancel: function(){
    layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {time: 5000, icon:6});
  }
});
//页面层

layer.open({
  type: 1,
  skin: 'layui-layer-rim', //加上边框
  area: ['420px', '240px'], //宽高
  content: 'html内容'
});
layer.tips('Hi,我是tips', '吸附元素选择器,如#id');
//相册层
$.getJSON('test/photos.json?v='+new Date, function(json){
  layer.photos({
    photos: json //格式见API文档手册页
    ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机
  });
});
//tab层
layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1', 
    content: '内容1'
  }, {
    title: 'TAB2', 
    content: '内容2'
  }, {
    title: 'TAB3', 
    content: '内容3'
  }]
});

点击小图看大图

$(document).on("click","img.big",function(e){
    layer.photos({
        photos: { "data": [{"src": e.target.src}] }
    });
});
作者:Yoby  创建时间:2020-07-25 16:53
 更新时间:2024-12-05 13:26
上一篇:
下一篇: