浅谈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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
JavaScript分页组件使用方法详解
Jul 26 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面向对象中常用的关键字和魔术方法
2017/02/04 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
详解package.json版本号规则
2019/08/01 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python使用sorted排序的方法小结
2017/07/28 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
python os.fork() 循环输出方法
2019/08/08 Python
python 公共方法汇总解析
2019/09/16 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
授权收款委托书
2014/09/23 职场文书
教师学期末个人总结
2015/02/13 职场文书