layer ui插件显示tips时,修改字体颜色的实现方法


Posted in Javascript onSeptember 11, 2019

今天做调查问卷,又遇到一个蛋疼小问题,记录下。

调查问卷有很多选项是要求必填的,如果不填的话,需要给出友好的提示。用的如下组件:http://layer.layui.com/

1、之前一直默认用的:

<script src="/assets/js/layer/layer.js"></script>
function showMessage(msg, domObj) {
 layer.tips(msg, domObj,{tips:3});//弹出框加回调函数
}
showMessage("选项不能为空", $(this));

效果如下:

layer ui插件显示tips时,修改字体颜色的实现方法

2、ui过来看了下之后,说太丑,要换成白色背景,红色字体

可是查看了半天的官方文档,只看到了修改背景颜色的配置项,没找到改字体色的配置项:

勉强修改背景色后如下:

function showMessage(msg, domObj) {
  layer.tips(msg, domObj,{tips:[3,"red"]});//弹出框加回调函数
 }

layer ui插件显示tips时,修改字体颜色的实现方法

3、最后实在无语,说搞不了,后边同事折腾了一会,过来提供了如下方案:

function showMessage(msg, domObj) {
  layer.tips("<span style='color:red'>"+msg+"</span>", domObj,{tips:[3,'#fff']});//弹出框加回调函数
 }

layer ui插件显示tips时,修改字体颜色的实现方法

好吧,背景色还是可以改的。。。有时候说不行,只是没想到而已

以上这篇layer ui插件显示tips时,修改字体颜色的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 三种创建对象的方法
Oct 16 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 #Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 #Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 #Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 #Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 #Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 #Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 #Javascript
You might like
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
解析Python中的异常处理
2015/04/28 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
python实现外卖信息管理系统
2018/01/11 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
《颐和园》教学反思
2014/02/26 职场文书
安全目标责任书
2014/07/22 职场文书
三严三实学习心得体会
2014/10/13 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
特岗教师个人总结
2015/02/10 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android
vue3不同环境下实现配置代理
2022/05/25 Vue.js