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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
js 数据类型转换总结笔记
Jan 17 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
解决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 include,include_once,require,require_once
2008/09/05 PHP
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
php数组删除元素示例
2014/03/21 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
《要下雨了》教学反思
2014/02/17 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
创意婚礼策划方案
2014/05/18 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
2016银行求职自荐信
2016/01/28 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js
MySQL数据库之存储过程 procedure
2022/06/16 MySQL