🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
官方文档<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}] } }); }); ~~~ ~~~