浅谈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 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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 SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
JavaScript 密码强度判断代码
2009/09/05 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
wxPython窗口的继承机制实例分析
2014/09/28 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python3运算符常见用法分析
2020/02/14 Python
浅谈Python 函数式编程
2020/06/20 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
医学生就业推荐表自我鉴定
2014/03/26 职场文书
高中班主任评语大全
2014/04/25 职场文书
安全标语大全
2014/06/10 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
求职信范文怎么写
2015/03/19 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python