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

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

调查问卷有很多选项是要求必填的，如果不填的话，需要给出友好的提示。用的如下组件：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));

效果如下：

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

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

勉强修改背景色后如下：

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

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

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

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

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

赞 (0)

相关推荐

  • layui操作列按钮个数和文字颜色的判断实例

    一.达到的效果如图,通过值去判断是否需要该按钮 cols: [[ //表头 {field: 'money', title: '操作',toolbar: '#barDemos'} ]] <script type="text/html" id="barDemos"> {{# if(d.s_state == 0){ }} <span style="color:red">未审核</span> {{# }else if(

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

    今天做调查问卷,又遇到一个蛋疼小问题,记录下. 调查问卷有很多选项是要求必填的,如果不填的话,需要给出友好的提示.用的如下组件:http://layer.layui.com/ 1.之前一直默认用的: <script src="/assets/js/layer/layer.js"></script> function showMessage(msg, domObj) { layer.tips(msg, domObj,{tips:3});//弹出框加回调函数 } s

  • layui: layer.open加载窗体时出现遮罩层的解决方法

    如下所示: 把窗体方法独立出来放在layer.use([],function(){});外面,需要的时候从layer.use方法里面调用,就不会出现遮罩层 layer.use([],function(){ $("#添加按钮id").click(function(){ editData("",form,"添加") ; }) ; }); function editData(data,from,title){ var win = layer.open(

  • 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

    微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮修改字体颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="color:{{color}}">我是view标签</view> <view style="display:flex;"> <block wx:for="{{colorArray}}" wx:k

  • jQuery实现字体颜色渐变效果的方法

    本文实例讲述了jQuery实现字体颜色渐变效果的方法.分享给大家供大家参考,具体如下: jQuery不允许css属性值为非数字的属性进行动画处理, 比如.animate(color:'red',500)或是.animate(fontWeight:'bold',500)都无法运行, 因此如果想实现颜色渐变的效果需要animate()外的其他方法,示例如下 方法1: <!DOCTYPE html> <html lang="en"> <head> <

  • Android编程实现TextView字体颜色设置的方法小结

    本文实例讲述了Android编程实现TextView字体颜色设置的方法.分享给大家供大家参考,具体如下: 对于setTextView(int a)这里的a是传进去颜色的值.例如,红色0xff0000是指0xff0000如何直接传入R.color.red是没有办法设置颜色的,只有通过文章中的第三种方法先拿到资源的颜色值再传进去. 复制代码 代码如下: tv.setTextColor(this.getResources().getColor(R.color.red)); 关键字: android t

  • CKeditor4 字体颜色功能配置方法教程

    本文实例讲述了CKeditor4 字体颜色功能配置方法.分享给大家供大家参考,具体如下: 今天动手ckeditor编辑器的时候发现工具栏上并没有可以更改字体颜色和背景颜色的按钮,所以我上网搜了下,网上特别多config.js文件配置的代码了,看得眼花缭乱的我选择把全部代码都复制下来.结果当然是没用的--一开始我还能有文本框.工具栏,到后来就变成什么都没有了. 后来我找到了ckeditor的文档:https://ckeditor.com/docs/index.html,找到里面的指南 在搜索框里搜

  • Pycharm插件(Grep Console)自定义规则输出颜色日志的方法

    很多介绍 根据日志等级打印不同颜色 的文章都是介绍的Ideolog, 但是我个人还是倾向于 Grep Console, 你可以在配置界面配置自己预定的正则规则, 根据规则匹配将输出附带颜色的日志内容: 你需要在 Pycharm -> Settings -> Plugins 进行安装并重启 Pycharm 设置自己的正则规则, 你可以通过 Pycharm -> settings -> other settings -> Grep console 进行规则配置, 或者是点击 RU

  • iOS开发技巧之状态栏字体颜色的设置方法

    状态栏的字体为黑色:UIStatusBarStyleDefault 状态栏的字体为白色:UIStatusBarStyleLightContent 一.在info.plist中,将View controller-based status bar appearance设为NO 状态栏字体的颜色只由下面的属性设定,默认为白色: // default is UIStatusBarStyleDefault [UIApplication sharedApplication].statusBarStyle 解

  • Flutter 透明状态栏及字体颜色的设置方法

    注:底色透明是否生效与android版本有关,版本过低设置无效 1.在main.dart内设置 void main(){ runApp(new MyApp()); if (Platform.isAndroid) { //设置Android头部的导航栏透明 SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle( statusBarColor: Colors.transparent, //全局设置透明 statusBarIc

  • extjs grid设置某列背景颜色和字体颜色的实现方法

    css代码: 复制代码 代码如下: .x-grid-back-red { background: #FF0000; } js代码: 复制代码 代码如下: { header : '分成类型', dataIndex : 'divideType', renderer : function(v,m){ m.css='x-grid-back-red'; return v; }, width : 60 } 或者直接这样写也可以 复制代码 代码如下: { header : '编号', dataIndex :

随机推荐