浅谈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 相关文章推荐
FileUpload上传图片(图片不变形)
Aug 05 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
详解vue渲染从后台获取的json数据
Jul 06 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
vue3.0生命周期的示例代码
Sep 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下批量挂马和批量清马代码
2011/02/27 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
jQuery代码优化方法总结
2018/01/29 jQuery
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
Python中的hypot()方法使用简介
2015/05/18 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
机械制造毕业生求职信
2014/03/03 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
大三学习计划书范文
2014/05/02 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
就业协议书样本
2014/08/20 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server