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 相关文章推荐
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 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
php实现的漂亮分页方法
2014/04/17 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
2007/05/30 Javascript
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
ext jquery 简单比较
2010/04/07 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python中的getopt函数使用详解
2015/07/28 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
考试作弊被抓检讨书
2014/01/10 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
化妆品活动策划方案
2014/05/23 职场文书
演讲稿开场白台词
2014/08/25 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
药店营业员岗位职责
2015/04/14 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
民间借贷借条如何写
2015/05/26 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers