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 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
如何使用CocosCreator对象池
Apr 14 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调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
PDO::prepare讲解
2019/01/29 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
最基础的Python的socket编程入门教程
2015/04/23 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
python正则实现提取电话功能
2018/02/24 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
公务员培训自我鉴定
2014/02/01 职场文书
考试违纪检讨书
2014/02/02 职场文书
安全生产计划书
2014/05/04 职场文书
专科生就业求职信
2014/06/22 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
社会实践心得体会范文
2016/01/14 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers