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 相关文章推荐
js 数组的for循环到底应该怎么写?
May 31 Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
Javascript缓存API
Jun 14 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
vue的token刷新处理的方法
Jul 17 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
Vue实现根据hash高亮选项卡
May 27 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 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
python利用platform模块获取系统信息
2020/10/09 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
linux面试题参考答案(7)
2012/10/29 面试题
幼儿园大班新学期寄语
2014/01/18 职场文书
一份创业计划书范文
2014/02/08 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
面试通知短信
2015/04/20 职场文书
辞职信格式范文
2015/05/13 职场文书
公司催款律师函
2015/05/27 职场文书
python实现图片批量压缩
2021/04/24 Python
Mysql Online DDL的使用详解
2021/05/20 MySQL
python如何利用traceback获取详细的异常信息
2021/06/05 Python