Layui调整layui.confirm的样式

基本结构(分为三大部分):标题、主体和按钮

<script>
layer.confirm('你吃饭了吗?', {
    title:'标题',
    area:['240px','160px'], //弹框的大小
    btn:['吃了','还没'] //按钮
    }, function(){
        //点击“吃了”执行的操作
    }, function(){
        //点击“还没”执行的操作		
    } 
)
</script>

调整标题的样式(字体大小和背景色):直接在语法中设置即可

<script>
layer.confirm('你吃饭了吗?', {
    title:['信息', 'font-size:20px;background:red'], //背景色为red,字体为20px
    area:['240px','160px'], //弹框的大小
    btn:['吃了','还没'] //按钮
    }, function(){
        //点击“吃了”执行的操作
    }, function(){
        //点击“还没”执行的操作		
    } 
)
</script>

调整主体内容(你吃饭了吗?)的字体样式:在原有CSS样式上做调整

<style>
.layui-layer-dialog .layui-layer-content {
    font-size: 20px  !important;  //字体大小; !important:提升指定样式规则的应用优先权
    line-height: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
    position: relative;
    color: #2d2d2d;
    font-weight: bold; //字体加粗
    word-break: break-all;
}
</style>

调整按钮的样式(内边距和按钮上字体的大小):在原有CSS样式上做调整

<style>
.layui-layer-btn {
	padding:0px 0px 15px !important;   //按钮的内边距
 }

.layui-layer-btn a{
	font-size:18px;   //按钮中字体的大小
}
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值