频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
弹出层layer!!!基础解析
2018-09-29 10:37:36      个评论      
收藏   我要投稿

世界杯外围投注官网

\

\

\

\

\

\

功能强大,实用,操作方便,文档齐全。

常用功能世界杯外围投注网站:




<script src=""></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:'' //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:''
                });
            }
        });
    }
    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:''
            });
            layer.msg('欢迎使用layer');
        }); 
    }
    </script>

hello,i&世界杯外围投注官网39;m layer!

参数灵活,丰富。可以作为开发项目的公共模块,多处使用。

点击复制链接 与好友分享!回本站首页
上一篇:js写飞机大战实战
下一篇:css居中对齐的几种方法实例分享
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑--致力于做实用的IT技术学习网站