layer自定义弹窗样式

发布时间:2017-5-29 23:45:31 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"layer自定义弹窗样式 ",主要涉及到layer自定义弹窗样式 方面的内容,对于layer自定义弹窗样式 感兴趣的同学可以参考一下。

1.下载并引用js,

官网http://layer.layui.com/

文档http://www.layui.com/doc/modules/layer.html

<link href="~/Scripts/layer/layer.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/layer/layer.js"></script>

2.自定义样式

<style>
<!--样式1-->
        body .demo-class {
            background: url(/images/draw/pc_cj_open1.png) no-repeat;
            border: none;
        }

            body .demo-class .layui-layer-content {
                padding: 3rem 3rem 0 3rem;
                text-align: center;
                font-size: 1.2rem;
                font-weight: bold;
                height: 1px;
            }

            body .demo-class .layui-layer-btn {
                margin-top: 0rem;
            }

                body .demo-class .layui-layer-btn a {
                    background: #ff6a00;
                    border: 0px;
                }

                body .demo-class .layui-layer-btn .layui-layer-btn1 {
                    background: #afb611;
                    border: 0px;
                }
<!--样式2-->
        body .winning-class {
            background: url(/images/draw/pc_cj_open3.png) no-repeat;
            border: none;
        }

            body .winning-class .layui-layer-content {
                padding: 5rem 3rem 2rem 3rem;
                text-align: center;
                font-size: 1.2rem;
                font-weight: bold;
                height: 1px;
            }

            body .winning-class .layui-layer-btn {
                margin-top: 1rem;
            }

                body .winning-class .layui-layer-btn a {
                    background: #ff6a00;
                    border: 0px;
                }

                body .winning-class .layui-layer-btn .layui-layer-btn1 {
                    background: #afb611;
                    border: 0px;
                }
    </style>

3.调用

<script>
        //全局样式
        layer.config({
            skin: 'demo-class'//自定义样式demo-class
        })
    //当没有定义skin时使用的是全局样式
    layer.confirm('提示信息123', {
                            title:false,
                            btnAlign: 'c',
                            area: ['20rem', '12rem'],
                            btn: ['确定抽奖', '关闭'] //按钮
                        }, function(index){
                            layer.close(index);
                            StartGame();
                        });

    layer.msg('提示信息123123', {
                            skin:'winning-class',//自定义样式winning-class
                            time:0,
                            title:false,
                            btnAlign: 'c',
                            area: ['20rem', '12rem']
                            , btn: ['确定']
                            , yes: function (index) {
                                layer.close(index);
                                window.location.href=window.location.href;
                            }

上一篇:@ResultMapping注解
下一篇:AIX性能监控 - 规格严格

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。