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>

好文要頂呀，兄弟們