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 相关文章推荐
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
node.js入门学习之url模块
Feb 25 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
AngularJs 常用的过滤器
May 15 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 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
thinkphp连贯操作实例分析
2014/11/22 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
use jscript List Installed Software
2007/06/11 Javascript
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
Javascript学习指南
2014/12/01 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
优秀生推荐信范文
2013/11/28 职场文书
葡萄牙语专业个人求职信
2013/12/10 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
研究生导师推荐信
2014/09/06 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
单位计划生育责任书
2015/05/09 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
素质教育学习心得体会
2016/01/19 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers