layer弹窗样式的修改

最新推荐文章于 2025-05-11 11:26:37 发布

qq_36470789

最新推荐文章于 2025-05-11 11:26:37 发布

阅读量1.5w

点赞数

CC 4.0 BY-SA版权

文章标签：工作 js css样式冲突 layer

本文链接：https://blog.csdn.net/qq_36470789/article/details/78238402

工作中遇到layer弹窗按钮样式冲突，通过查看文档和参考他人解决方案，成功修正。主要改变在于设置layer皮肤，但对具体机制仍存疑惑。计划以此博客记录问题解决过程，便于日后回顾。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

是工作上遇到的问题弹窗按钮样式冲突

修正前：

，

参考了这里之后才解决了http://blog.csdn.net/docallen/article/details/53613186

修正后：

重要的是这句（其实layer官网的文档上就有skin的介绍，所以还是要多看看文档）

skin: 'demo-class'

只有在函数里加了这句才可以重新编写样式

layer.confirm('该收费清单已打印，是否要重新打印？', {
                        skin: 'demo-class',//skin属性可以将layer的标签提取出来，重新定义样式
                        btn: ['打印','取消'] //按钮
                    }, function(){
                        printerPage();
                    }, function(){
                        layer.closeAll();
                        return false;
                    });

对”打印“和”取消“按钮重新定义样式，只改变高度了高度就得到了我想要的结果

 <style type="text/css">
        body .demo-class .layui-layer-btn0{//按钮的class是通过浏览器的查看元素功能知道的
            width: 35px;
        }
        body .demo-class .layui-layer-btn1{
            width: 35px;
        }
    </style>

虽然已经解决但是还是不太理解，故才写成博客供自己研究

之前没有想到layer框架的html标签可以用提取出来，所以花了很长时间来解决这个问题，现在知道了怎么提取样式，其实也看到有不同的方法，不过还是没能研究到。之前还遇到了挺多问题没有做记录。现在也没办法再回顾，希望自己以后的问题都能以博客的方式记录下，给自己一个便利。