layer.confirm()右边按钮实现href的例子


Posted in Javascript onSeptember 27, 2019

layer官方API默认右边按钮=右上角X按钮,点击=关闭弹窗

此方法最终效果是右上角X保留关闭弹窗功能,并且右边按钮能设置(location.href="") 等

之前试过的写法(错误):

layer.confirm('想去哪个网站?',{btn:['新浪','百度']},function(index){

layer.close(index);

location.href="http://www.sina.com" rel="external nofollow" rel="external nofollow" ; }

,function(index){

layer.close(index);

location.href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" ; }

})

第二条函数相当于右边按钮和X绑定在一起,不能分离

经过审查元素,发现了一个强硬的方法,试了一下居然成功了

原理是直接给右边按钮绑上click事件,可以覆盖插件效果

代码如下:

layer.confirm('想去哪个网站?',{icon:3,btn:['新浪','百度']},function(index){         //这里的icon:3 是‘?'图标,在上次博客试出来的共存方法
layer.close(index);
  location.href="http://www.sina.com" rel="external nofollow" rel="external nofollow" ;  
})
$('.layui-layer-btn1').click(function(){              // .layui-layer-btn1 = 右边按钮class名
location.href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" ;  
})

以上这篇layer.confirm()右边按钮实现href的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
javascript prototype原型操作笔记
Dec 07 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
React-vscode使用jsx语法的问题及解决方法
Jun 21 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 #Javascript
使用layer模态框给新页面传值的方法
Sep 27 #Javascript
JavaScript实现随机五位数验证码
Sep 27 #Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 #Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 #Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 #Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 #Javascript
You might like
域名查询代码公布
2006/10/09 PHP
与数据库连接
2006/10/09 PHP
php去除重复字的实现代码
2011/09/16 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
施工资料员岗位职责
2014/01/06 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
内勤岗位职责范本
2015/04/13 职场文书
找规律教学反思
2016/02/23 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python