layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法


Posted in Javascript onSeptember 24, 2019

昨天layer插件弹出层关闭问题弄的我直挠头,短短几行代码,用了我将近2个钟头才解决。我的使用场景是这样。在页面中用layer.open弹出一个层,在层内是微信支付二维码,客户扫码支付。支付成功后关闭此弹出层,并提示项目投递成功,然后再跳转到其他页面。为了监控微信二维码扫码支付是否成功。我利用了每隔三秒,查询下支付订单,查看支付订单的支付状态是否改变。在实际操作中由于使用的是location.href做跳转,然而跳转执行的非常慢,要10几秒才能成功,这不能忍。只能退而求其次,只是提示投递成功,然后关闭弹出层。由于关闭弹出层,及弹出警告提示的相关代码是在弹出层所在页面执行。

实际代码在执行过程当中遇到了各种问题。

$(function () {
      setInterval(GetDeliverProjectPayStatusSuccess, 3000);
    });
    function GetDeliverProjectPayStatusSuccess() {
      $.post("/ajax/GetDeliverProjectPayStatus.ashx", { OrderNo:"<%=Request.QueryString["OrderNo"] %>" }, function (data) {
        console.info(data);
 
        if (data == 1) {
  parent.layer.closeAll();
          layer.alert("项目投递成功");
 
        }
      });
    }

首先尝试的代码如上。先关闭弹出层,然后提示项目投递成功。这尝试的结果是,弹出层被关闭了。却没有任何提示。为什么这样执行,分析的结果是关闭弹出层,意味着弹出页面被关闭。弹出页面被关闭了。在弹出页面存在的layer.alert代码也就无从执行。然后这两行代码调换位置。可仍然是弹出层被关闭了。却没有提示。这个分析的原因是就像javascript中的alert与location.href一样。如果先alert然后在location.href,也不会执行alert,或者说其实有执行,但是由于系统执行的非常快,还没等你看到alert信息,浏览器已经跳转了。这里也是,还没等你看到项目投递成功的信息,弹出层已经关闭了。

又尝试了带回调函数的layer.alert,等客户点击layer.alert的确定按钮后再执行parent.layer.closeAll() 来关闭弹出层。然而残酷的现实是,由于这个是每隔三秒执行一次post请求,结果就是如果你点击关闭按钮过慢,它会每隔3秒弹出项目投递成功的提示。这怎么能用。难道你要求客户必须快速反应,点击关闭按钮?经过不断尝试,最终还是找到了一个方法解决了这个问题。

能够很好解决此问题的代码如下:

$(function () {
      setInterval(GetDeliverProjectPayStatusSuccess, 3000);
    });
    function GetDeliverProjectPayStatusSuccess() {
      $.post("/ajax/GetDeliverProjectPayStatus.ashx", { OrderNo:"<%=Request.QueryString["OrderNo"] %>" }, function (data) {
        console.info(data);
 
        if (data == 1) {
          parent.layer.alert("项目投递成功");
          var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
          parent.layer.close(index); //再执行关闭 
 
        }
      });
    }

以上这篇layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript prototype 原型链
Mar 12 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
用JS实现选项卡
Mar 23 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
解决layer.prompt无效的问题
Sep 24 #Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 #Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 #Javascript
通过实例了解JS 连续赋值
Sep 24 #Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 #Javascript
JS防抖和节流实例解析
Sep 24 #Javascript
vue.js实现图书管理功能
Sep 24 #Javascript
You might like
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
php之XML转数组函数的详解
2013/06/07 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
jQuery Clone Bug解决代码
2010/12/22 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
C语言开发工程师测试题
2016/12/20 面试题
大学自我评价
2014/02/12 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
公司介绍信范文
2015/01/31 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
mybatis 获取更新记录的id
2022/05/20 Java/Android