浅谈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 相关文章推荐
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
javascript的内存管理详解
Aug 07 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
canvas实现钟表效果
Feb 13 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
10分钟学会js处理json的常用方法
Dec 06 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编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
JavaScript实现网页留言板功能
2020/11/23 Javascript
快速查询Python文档方法分享
2017/12/27 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
瑜伽国际:Yoga International
2018/04/18 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
外科实习自我鉴定
2013/10/06 职场文书
2013年大学生的自我鉴定
2013/10/24 职场文书
预备党员个人总结
2015/02/14 职场文书
2015毕业寄语大全
2015/02/26 职场文书
七年级作文之我的梦想
2019/10/16 职场文书