0x00 前言
下午将后台将一系列插件更新后，结果突然发现前台的登录功能出现了问题，无法正常弹出验证码窗口，似乎这个问题在之前就出现过了。看了下插件的更新日志：
前不久貌似才修补了问题，版本迭代新的BUG又产生了，哈哈，那我们就来动手修复一下。
0x01 寻找代码
我们先在浏览器断点调试一下到底是哪部分的问题，先从浏览器控制台的报错入手：
Uncaught TypeError: jQuery(…).modal is not a function
貌似是这个modal的原因，通过查询jQuery的文档我们得知，这个应该是由bootstrap的相关API来控制的，但是我看了下插件，并没有这个依赖项，那这部分应该是WPCOM自己编写的。不错，点个赞，这个做法极大降低了与其他主题或者插件的冲突性。
单步跟进去完全找不到相关的函数定义，说明这个方法可能根本就没有定义上，或者有些其他冲突，以下是与这个弹窗相关的闭包代码：
代码太长太多，我就不放完整了，我重新在浏览器中运行这个脚本，仍然不起作用。
0x02 尝试修复
既然插件的代码无法满足我们的要求，那我们就去WPCOM官网给出demo地址来找找可用的弹窗代码。
我们通过关键字查找和断点的方式，进入到了这个modal方法的定义：
这一个脚本归属于justnews主题，之前本来想买的，但是看苏醒那里出了个Alright，所以就只入手了WPCOM Member Pro插件。废话不多说，我们直接将这个方法扣下来，闭包一下得到以下完整代码：
(
t.prototype.show = function(a) {
var i = this
, n = e.Event("show.wpcom.modal", {
relatedTarget: a
});
this.$element.trigger(n),
this.isShown || n.isDefaultPrevented() || (this.isShown = !0,
this.checkScrollbar(),
this.setScrollbar(),
this.$body.addClass("modal-open"),
this.escape(),
this.resize(),
this.$element.on("click.dismiss.wpcom.modal", '[data-dismiss="modal"], [data-wpcom-dismiss="modal"]', e.proxy(this.hide, this)),
this.$dialog.on("mousedown.dismiss.wpcom.modal", (function() {
i.$element.one("mouseup.dismiss.wpcom.modal", (function(t) {
e(t.target).is(i.$element) && (i.ignoreBackdropClick = !0)
}
))
}
)),
this.backdrop((function() {
var n = e.__transition && i.$element.hasClass("fade");
i.$element.parent().length || i.$element.appendTo(i.$body),
i.$element.show().scrollTop(0),
i.adjustDialog(),
n && i.$element[0].offsetWidth,
i.$element.addClass("in"),
i.enforceFocus();
var r = e.Event("shown.wpcom.modal", {
relatedTarget: a
});
n ? i.$dialog.one("wpcomTransitionEnd", (function() {
i.$element.trigger("focus").trigger(r)
}
)).emulateTransitionEnd(t.TRANSITION_DURATION) : i.$element.trigger("focus").trigger(r)
}
)))
}
,
PS：代码太长了，完整代码文件在文末会提供然后拉到浏览器运行一下脚本，看看什么情况。哦对了，这里要补一个环境，Uncaught ReferenceError: c is not defined，相关操作如下所示：
或者你从堆栈里面进去也行，我是直接跳进去的，然后把这个方法复制到刚刚从justnews主题里提取出来的闭包代码里面就行。
0x03 验证代码
先在浏览器里面执行一下，效果如下所示：
很好，正常弹窗，收工！
0x04 插件推荐
WPCOM Member Pro插件可为WordPress网站增加订单支付系统及更多高级功能，可实现会员订阅、付费阅读、付费下载、推广佣金、邀请码注册、代金券、钱包余额等功能
WPCOM Member Pro插件算是一款业内好用的一款用户中心插件，本站也是用的同款，如果你也想要拥有同样的功能，大可放心购买，并且一直享受更新服务，相较于TB-Member更加划算！
并且前端的用户中心和支付页面的兼容效果也算是做的很好的一个，如果你通过以上↑链接购买了插件，那么你将获得5%的返利，非常划算！
有偿页面适配服务 & 修复服务
适配Member Pro用户中心以及页面美化优化，苦活累活一次包干，50软妹币起步
0x05 相关文件
在WordPress中注册加载相关代码即可，记住要在jquery这个依赖项之后哦！
评论 (0)