layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
昨天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插件实现在弹出层中弹出一警告提示并关闭弹出层的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS插件clipboard.js实现一键复制粘贴功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要介绍了JS实现星星评分功能实例代码(两种方法)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
在Web开发中,JavaScript不仅是实现交互效果的关键,还可以用于构建复杂的可视化组件,如动态交互式图表,下面我们就来看看如何构建一个动态交互式图表吧2024-02-02
这篇文章其实是要讲闭包的一些初级应用，但是为了将闭包，我们还是从嵌套函数开始说吧，纵使所有的JavaScript函数都可以说是闭包，但是只有当一个嵌套函数被导出到它所定义的作用域之外时，这种闭包才是有趣的。2010-11-11
BootStrap实现带有增删改查功能的表格(DEMO详解)
这篇文章主要介绍了BootStrap实现带有增删改查功能的表格，表格封装了3个版本，接下来通过本文给大家展示下样式及代码，对bootstrap增删改查相关知识感兴趣的朋友一起通过本文学习吧2016-10-10
这篇文章给大家罗列了在前段排序中会遇到的问题并写了解决方案，非常详细，有需要的朋友可以参考。2016-07-07
这篇文章主要介绍了微信js-sdk界面操作接口用法,结合实例形式分析了微信界面操作的相关接口功能与使用技巧,需要的朋友可以参考下2016-10-10
这篇文章主要为大家总结了Bootstrap Table使用心得,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
这篇文章主要介绍了JavaScript实现的仿新浪微博原生态输入字数即时检查功能,涉及javascript事件响应及字符串的遍历、转换、判断等相关操作技巧,需要的朋友可以参考下2017-09-09
跟我学Node.js（四）---Node.js的模块载入方式与机制
Node.js中模块可以通过文件路径或名字获取模块的引用。模块的引用会映射到一个js文件路径，除非它是一个Node内置模块。Node的内置模块公开了一些常用的API给开发者，并且它们在Node进程开始的时候就预加载了。2014-06-06
最新评论