浅谈layer弹出层按钮颜色修改方法


Posted in Javascript onSeptember 11, 2019

layer弹出层有多种格式的弹出,使用方法也不细述。

在弹出确认框可使用confirm或open方式

在open中

layer.open({
  content: '确认提交?',
  btn: ["确认", "取消"],
  yes: function (index) {
    somefunciton...
    layer.close(index)
  },
  btn2: function (index) {
  }
});

layer中确认按钮在第一个位置,展示也是按顺序展示

如果和自己项目中的风格不一致,需要把确认按钮和取消按钮互换,如果只是简单的把文字互换了,但是按钮的颜色还是没有变化。

这时我们需要做的有:1:变更按钮顺序,2:修改回调函数,3:修改按钮的颜色

layer.open({
  skin: 'demo-class',
  content: '确认提交?',
  btn: ["取消", "确认"],
  yes: function (index) {
    layer.close(index)
  },
  btn2: function (index) {
    somefunciton...
  }
});
 
//在页面style中定义按钮css样式
<style>
 body .demo-class .layui-layer-btn0{
  border-color: #E6E3E6;
  background-color: #FFF;
  color: black;
 }
 body .demo-class .layui-layer-btn1{
  border-color: #4898d5;
  background-color: #2e8ded;
  color: #fff;
 }
</style>

这样调用就可以实现了,confirm的底层实现也是open方式,所以confim也应该是一样的结果,但没有去实验。

以上这篇浅谈layer弹出层按钮颜色修改方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
小程序转发探索示例
Feb 19 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 #Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 #Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 #Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 #Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 #Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 #Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 #Javascript
You might like
php HTML无刷新提交表单
2016/04/05 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Vue实现验证码功能
2019/12/03 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
利用python 下载bilibili视频
2020/11/13 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
销售总监工作职责
2013/11/21 职场文书
出纳员岗位责任制
2014/02/11 职场文书
课程改革实施方案
2014/03/16 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
保研专家推荐信范文
2015/03/25 职场文书
飞越疯人院观后感
2015/06/09 职场文书
Golang的继承模拟实例
2021/06/30 Golang
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android