调整layui的弹出框msg的字体大小以及其他样式:调整layui的弹出框msg的字体大小以及其他样式: //文本里面可以加html标签let sure = layer.msg('span style="font-size:20px"确定喜欢她吗?/span', { time: 0 //0表示不自动关闭 ,time自动关闭所需毫秒 ,单位是毫秒(1秒=1000毫秒) , btn: ['span style="font-size:20px"确定/s
//文本里面可以加html标签
let sure = layer.msg('<span style="font-size:20px">确定喜欢她吗?</span>', {
time: 0 //0表示不自动关闭 ,time自动关闭所需毫秒 ,单位是毫秒(1秒=1000毫秒)
, btn: ['<span style="font-size:20px">确定</span>', '<span style="font-size:20px">取消</span>'],
//success指的是 修改按钮的样式 三种样式left center right
success: function(layero){
layero.find('.layui-layer-btn').css('text-align', 'center')
}
, yes: function (index) {
点击确定触发事件
}
});
//sure指的是上面的msg弹出层,定义msg弹出层的样式
layer.style(sure,{
width:10px,
height:10px
});
layui的弹出框open常用的两种功能:
let html = "这里面写任何html内容";
比如:let html ='<div class="nav_upload">\n' +
' <input type="text" value="我是html"/>\n' +
'</div>\n' +
'<script>\n' +
'这里写交互功能'+
'</script>';
layer.open({
type: 1 //Page层类型
,area: ['720px', '500px']//弹出层页面比例,类型:String/Array,默认:'auto',在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: '500px',高度仍然是自适应的。当你宽高都要定义时,你可以area: ['500px', '300px']
,offset:'auto'// 坐标 类型:String/Array 默认:垂直水平居中 offset默认情况下不用设置,
// ,title: '照片上传'//title默认显示在左边,能拖动了
,title: ['照片上传','text-align:center']//传一个数组,第一个参数标题,第二个参数可以写任何css样式,能拖动
// ,title: false//不显示title,但是不能拖动了
,shade: 0.6 //遮罩透明度 类型:String/Array/Boolean 弹层外区域。默认是0.3透明度的黑色背景('#000')。如果你想定义别的颜色,可以shade: [0.8, '#393D49'];如果你不想显示遮罩,可以shade: 0
,maxmin: true //允许全屏最小化
,anim: 1 //0-6的动画形式,-1不开启
, content: html//在这里面输入任何合法的js语句
});
layer.open({
type: 2 //2类型,解析url iframe层
,closeBtn: 1 //关闭按钮是否显示 1显示0不显示
,title: "我是标题"//页面标题
,shadeClose: true //点击遮罩区域是否关闭页面
,shade: 0.8 //遮罩透明度 类型:String/Array/Boolean 弹层外区域。默认是0.3透明度的黑色背景('#000')。如果你想定义别的颜色,可以shade: [0.8, '#393D49'];如果你不想显示遮罩,可以shade: 0
,area: ['600px', '600px'] //弹出层页面比例
,content: 'XXX.html'//弹出层的url,//这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['XXX.html', 'no']
});
沃梦达教程
本文标题为:layui的弹出框msg修改字体按钮样式
基础教程推荐
猜你喜欢
- vue的 Mixins (混入) 2023-10-08
- 分页技术原理与实现之无刷新的Ajax分页技术(三) 2023-01-20
- Vue+WebSocket实现在线聊天 2023-10-08
- 关于 css:WebKit (iPad) CSS3: 背景过渡闪烁 2022-09-21
- 解决ajax的delete、put方法接收不到参数的问题方法 2023-02-23
- ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15
- 第7天:CSS入门 2022-11-04
- ECSHOP中实现ajax弹窗登录功能 2023-01-31
- 深入浅析Jsonp解决ajax跨域问题 2022-12-28
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽) 2023-02-01