问题背景:

1. ajax前后端数据交互的时候success属性或者error属性返回的情况需要通过弹出框提示用户,以提升用户体验。
2. 弹出框使用的是jQuery提供的弹出框美化插件。

遇到的问题:

弹出框明明写了但是闪退

前端弹出框使用插件解决闪退问题图中箭头所指明明在执行成功的时候使用了插件设置了弹出框但是闪退。可以先通过console.log打印调试一下代码是否能走到这里。发现能正确打印txt,说明弹出框有效,问题是闪退。

解决:

  1. 当页面存在刷新时【比如使用了window.location.reload();】会导致页面刷新的时候弹出框闪退。解决办法是设置弹出框在页面或者框架加载之后再弹出。
    前端弹出框使用插件解决闪退问题
    可以把弹出框的操作用函数封起来,然后通过setTimeout()来设置延时弹出。在页面就不用写重新加载页面了。
  2. 修改xcConfirm.js:
    前端弹出框使用插件解决闪退问题
    由于曾经的业务需求修改了插件中的源码,导致将success框中的按钮变成了适应当时业务需求的按钮,现在需要单独的成功按钮可以仿照源码中的规则重新设定一个success1。
    注册弹窗类型:
    前端弹出框使用插件解决闪退问题
    解决闪退问题又要重新加载页面也可以修改插件中的点击确定按钮后的操作
    前端弹出框使用插件解决闪退问题
    注意:修改插件不是最好的解决办法,因为如果多处引用插件的同一功能,为了一个需求而修改可能造成其他引用的地方不适用的情况。使用了插件最好能够在页面自己写逻辑去覆盖插件的操作,但是如果能熟练的看懂并掌握插件的实现方式,也是可以修改插件的。

相关文章: