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>

好文要顶呀，兄弟们

转载于:https://www.cnblogs.com/Jerrycjc/p/6097714.html