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;

                            }

                        });

</script>

好文要顶呀，兄弟们