浅谈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 相关文章推荐
javascript的对话框详解与参数
Mar 08 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
node使用request请求的方法
Dec 20 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
python中selenium库的基本使用详解
2020/07/31 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
财务人员个人自荐信范文
2013/09/26 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
2014年销售部工作总结
2014/12/01 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
Vue vee-validate插件的简单使用
2021/06/22 Vue.js