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 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
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函数,php爱好者站推荐
2007/03/19 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
Python编写一个闹钟功能
2017/07/11 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
Python实战购物车项目的实现参考
2019/02/20 Python
ipython和python区别详解
2019/06/26 Python
Python中的self用法详解
2019/08/06 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
python 函数中的参数类型
2020/02/11 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
党组织公开承诺书
2014/03/29 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
小班上学期个人总结
2015/02/12 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
保护动物的宣传语
2015/07/13 职场文书
入党申请书怎么写?
2019/06/11 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
Python绘制散乱的点构成的图的方法
2022/04/21 Python