Layui 弹出框 如何修改样式
本文是适用于 弹出框格式是采用 字符串拼接的方式;success() 函数会在弹出框加载完成之后加载,但是并不能直接通jQuery:$('.XXXXX') 获取弹出框样式里面的dom元素。可以直接通过success()的参数layero,直接获取和修改相关的dom,
// 弹出框样式
var addprogram =
"<table class='layui-table'>"+
"<tr>"+
"<td><input id='reproGramName' value = "+oldName+" class='layui-input'
placeholder='*请输入方案名称' type='text' style='width: 365px;'/></td>"+
"</tr>"+
"</table>";
// 打开弹出框
refreshprogramName = parent.layer.open({
type: 1,
area: ['400px','180px'], // 宽度;高度
fix: true, //不固定
maxmin: false,
shade:0.4,
id :'refreshprogramName',
title: '修改方案名称',
content: addprogram,
btn:['确定','取消'],
yes: function(index, layero){
},
//
success: function(layero, index){
// 必须通过 layero 获取 弹出的表单样式
updatePopupStyle(layero);
}
});
// 修改弹出框的样式
function updatePopupStyle(PopupLayero){
// 按钮样式
let but0 = PopupLayero.find('.layui-layer-btn0');
let but1 = PopupLayero.find('.layui-layer-btn1');
let inputTr = PopupLayero.find('.layui-table tbody tr');
// 弹出层弹出后执行的方法
if(!but0.hasClass('my_popup_bottom_button')){
but0.addClass('layui-btn layui-btn-radius my_popup_bottom_button');
but0.css({
"height":"28px",
"line-height":"28px",
})
}
if(!but1.hasClass('my_popup_bottom_button')){
but1.addClass('layui-btn layui-btn-radius my_popup_bottom_button');
but1.css({
"height":"28px",
"line-height":"28px",
"background":"#FFF"
})
but1.hover(
function(){
but1.css('color','#333333')
},function(){
but1.css('color','#333333')
}
);
}
// 取消 tr的悬浮效果
inputTr.hover(
function(){
inputTr.css('background','#FFF')
},function(){
inputTr.css('background','#FFF')
}
);
}