Adjust the style of layer.confirm

Basic structure (divided into three parts): title, body and buttons

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

Adjust the style of the title (font size and background color): set it directly in the grammar

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

Adjust the font style of the main content (have you eaten?): Adjust the original 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;
}

Adjust the style of the button (the padding and the size of the font on the button): adjust the original CSS style

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

.layui-layer-btn a{
	font-size:18px;   //按钮中字体的大小
}

 

Published 77 original articles · 100 likes · 70,000+ views

Guess you like

Origin blog.csdn.net/super_DuoLa/article/details/103260598