弹出层 layer !!! 常用
功能强大, 实用, 操作方便, 文档齐全.
常用功能代码:
- <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js">
- </script>
- <script src="layer/layer.js">
- </script>
- <script src="layer/extend/layer.ext.js">
- </script>
- <script>
- function func1() {
- layer.alert('内容');
- }
- function func2() {
- layer.alert('内容', {
- icon: 1,
- skin: 'layer-ext-moon' // 该皮肤由 layer.seaning.com 友情扩展. 关于皮肤的扩展规则, 去这里查阅 }); } function func3() { // 询问框 layer.confirm('您是如何看待前端开发?', { btn: ['重要','奇葩'] // 按钮 }, function(){ layer.msg('的确很重要', {icon: 1}); }, function(){ layer.msg('也可以这样', { time: 2000, //2s 后自动关闭 btn: ['明白了', '知道了'] }); }); } function func4() { // 提示层 layer.msg('玩命提示中'); } function func5() { // 墨绿深蓝风 layer.alert('墨绿风格, 点击确认看深蓝', { skin: 'layui-layer-molv' // 样式类名 ,closeBtn: 0 }, function(){ layer.alert('偶吧深蓝 style', { skin: 'layui-layer-lan' ,closeBtn: 0 ,shift: 4 // 动画类型 }); }); } function func6() { // 捕获页 layer.open({ type: 1, shade: false, title: false, // 不显示标题 content: $('.layer_notice'), // 捕获的元素 cancel: function(index){ layer.close(index); this.content.show(); layer.msg('捕获就是从页面已经存在的元素上, 包裹 layer 的结构', {time: 2000, icon:6}); } }); } function func7() { // 页面层 layer.open({ type: 1, skin: 'layui-layer-rim', // 加上边框 area: ['420px', '240px'], // 宽高 content: 'html 内容' }); } function func8() { // 自定页 layer.open({ type: 1, skin: 'layui-layer-demo', // 样式类名 closeBtn: 0, // 不显示关闭按钮 shift: 2, area: ['420px', '240px'], // 宽高 shadeClose: true, // 开启遮罩关闭 content: '内容' }); } function func9() { //tips 层 layer.tips('Hi, 我是 tips', $("#tips")); } function func10() { //iframe 层 layer.open({ type: 2, title: 'layer mobile 页', shadeClose: true, shade: 0.8, area: ['380px', '90%'], content: 'https://m.baidu.com' //iframe 的 url }); } function func11() { //iframe 窗 layer.open({ type: 2, title: false, closeBtn: 0, // 不显示关闭按钮 shade: [0], area: ['340px', '215px'], offset: 'auto', // 右下角弹出 time: 2000, //2 秒后自动关闭 shift: 2, content: ['test/guodu.html', 'no'], //iframe 的 url,no 代表不显示滚动条 end: function(){ // 此处用于演示 layer.open({ type: 2, title: '百度一下, 你就知道', shadeClose: true, shade: false, maxmin: true, // 开启最大化最小化按钮 area: ['1150px', '650px'], content: 'https://www.baidu.com' }); } }); } function func12() { // 加载层 var index = layer.load(0, {shade: false}); //0 代表加载的风格, 支持 0-2 } function func13() { //loading 层 var index = layer.load(1, { shade: [0.1,'#fff'] //0.1 透明度的白色背景 }); } function func14() { // 小 tips layer.tips('我是另外一个 tips, 只不过我长得跟之前那位稍有些不一样.', $('#tips2'), { tips: [1, '#3595CC'], time: 4000 }); } function func15() { //prompt 层 layer.prompt({ title: '输入任何口令, 并确认', formType: 1 //prompt 风格, 支持 0-2 }, function(pass){ layer.prompt({title: '随便写点啥, 并确认', formType: 2}, function(text){ layer.msg('演示完毕! 您的口令:'+ pass +'您最后写下了:'+ text); }); }); } function func16() { //tab 层 layer.tab({ area: ['600px', '300px'], tab: [{ title: 'TAB1', content: '内容 1' }, { title: 'TAB2', content: '内容 2' }, { title: 'TAB3', content: '内容 3' }] }); } function openpage() { layer.config({ extend: 'extend/layer.ext.js' }); // 页面一打开就执行, 放入 ready 是为了 layer 所需配件 (CSS, 扩展模块) 加载完毕 layer.ready(function() { // 官网欢迎页 layer.open({ type: 2, skin: 'layui-layer-lan', title: 'layer 弹层组件', fix: false, shadeClose: true, maxmin: true, area: ['1000px', '500px'], content: 'https://www.baidu.com' }); layer.msg('欢迎使用 layer'); }); }
- </script>
- hello,i'm layer!
初体验皮肤询问框提示层蓝色风格捕捉页页面层自定义 tips 层 iframe 层 iframe 窗加载层 loading 层小 tipsprompt 层 tab 层 openpagetipstips2
参数灵活, 丰富. 可以作为开发项目的公共模块, 多处使用.
来源: https://www.2cto.com/kf/201809/780387.html