浅谈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 相关文章推荐
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
javascript实现列表切换效果
May 02 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
Vue实现浏览器打印功能的代码
Apr 17 Javascript
JavaScript实现登录窗体
Jun 22 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
我的论坛源代码(七)
2006/10/09 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
对Python实现累加函数的方法详解
2019/01/23 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
python 字典的打印实现
2019/09/26 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
彩色的非洲教学反思
2014/02/18 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
发票退票证明
2015/06/24 职场文书
公司老总年会致辞
2015/07/30 职场文书
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript