fix(frontend): 充值弹窗开关自包含化,修复弹窗无法打开
initBalanceCharge 的开关路径原依赖 window.jQuery.fn.modal(Bootstrap 运行时)驱动 .modal.fade 壳;当 jQuery/Bootstrap 在 auto_fun 时刻不可用 或加载时序异常时弹窗永远无法打开。改为自包含原生实现,复刻 Bootstrap 3 行为与视觉(.in 显隐 + .modal-backdrop + body.modal-open + ESC 关闭 + 点遮罩关闭),复用 bootstrap.min.css 既有规则,去除运行时硬依赖。
This commit is contained in:
1 parent
50065ccc3e
commit
daae86e1af
1 file changed
+51
-20
+51
-20
@@ -393,28 +393,59 @@
|
|||||||
modal.dataset.aksrtChargeInitialized = '1';
|
modal.dataset.aksrtChargeInitialized = '1';
|
||||||
var form = modal.querySelector('[data-aksrt-charge-form]');
|
var form = modal.querySelector('[data-aksrt-charge-form]');
|
||||||
var busy = false;
|
var busy = false;
|
||||||
var jq = window.jQuery;
|
var chargeBackdrop = null;
|
||||||
|
|
||||||
document.querySelectorAll('[data-aksrt-charge-open]').forEach(function (btn) {
|
// 开关自包含:不复依赖 jQuery/Bootstrap modal 运行时,行为与视觉
|
||||||
btn.addEventListener('click', function () {
|
// 复刻 Bootstrap 3(.in 显隐 + .modal-backdrop + body.modal-open + ESC)。
|
||||||
// Zibll 弹窗壳(.modal.fade)走 Bootstrap modal 运行时(zibll 的 refresh_modal 同源行为)。
|
function openChargeModal() {
|
||||||
if (jq && jq.fn && jq.fn.modal) {
|
if (modal.classList.contains('in')) return;
|
||||||
jq(modal).modal('show');
|
// 兼容旧缓存标记(uc-modal 带 hidden 属性)
|
||||||
} else {
|
modal.removeAttribute('hidden');
|
||||||
modal.style.display = 'block';
|
modal.style.display = 'block';
|
||||||
modal.classList.add('in');
|
void modal.offsetWidth; // 强制 reflow,让 .fade 过渡从初始态开始
|
||||||
}
|
modal.classList.add('in');
|
||||||
});
|
if (!chargeBackdrop) {
|
||||||
});
|
chargeBackdrop = document.createElement('div');
|
||||||
if (jq && jq.fn && jq.fn.modal) {
|
chargeBackdrop.className = 'modal-backdrop fade in';
|
||||||
jq(modal).on('hidden.bs.modal', function () {
|
chargeBackdrop.setAttribute('data-aksrt-charge-backdrop', '1');
|
||||||
if (activePoll && typeof activePoll.abort === 'function') {
|
document.body.appendChild(chargeBackdrop);
|
||||||
activePoll.abort();
|
}
|
||||||
notyf('已停止查询支付状态', 'warning', 3, 'aksrt-balance-charge-payment-toast');
|
document.body.classList.add('modal-open');
|
||||||
}
|
|
||||||
activePoll = null;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
function closeChargeModal() {
|
||||||
|
if (!modal.classList.contains('in')) return;
|
||||||
|
if (activePoll && typeof activePoll.abort === 'function') {
|
||||||
|
activePoll.abort();
|
||||||
|
notyf('已停止查询支付状态', 'warning', 3, 'aksrt-balance-charge-payment-toast');
|
||||||
|
}
|
||||||
|
activePoll = null;
|
||||||
|
modal.classList.remove('in');
|
||||||
|
document.body.classList.remove('modal-open');
|
||||||
|
if (chargeBackdrop && chargeBackdrop.parentNode) {
|
||||||
|
chargeBackdrop.parentNode.removeChild(chargeBackdrop);
|
||||||
|
}
|
||||||
|
chargeBackdrop = null;
|
||||||
|
// 等过渡结束再撤 display,复刻 Bootstrap 的 fade-out 收尾
|
||||||
|
window.setTimeout(function () {
|
||||||
|
if (!modal.classList.contains('in')) {
|
||||||
|
modal.style.display = '';
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
document.querySelectorAll('[data-aksrt-charge-open]').forEach(function (btn) {
|
||||||
|
btn.addEventListener('click', openChargeModal);
|
||||||
|
});
|
||||||
|
modal.addEventListener('click', function (e) {
|
||||||
|
// 点遮罩层(.modal 自身)或关闭按钮(data-dismiss="modal")
|
||||||
|
if (e.target === modal || (e.target.closest && e.target.closest('[data-dismiss="modal"]'))) {
|
||||||
|
closeChargeModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.addEventListener('keydown', function (e) {
|
||||||
|
if (e.key === 'Escape' && modal.classList.contains('in')) {
|
||||||
|
closeChargeModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
// Zibll data-for/data-value 选中模型:余额档位(.vip-product.product-box)
|
// Zibll data-for/data-value 选中模型:余额档位(.vip-product.product-box)
|
||||||
// 选中变化不产生 change 事件(隐藏 input 由程序赋值),需显式重置幂等键。
|
// 选中变化不产生 change 事件(隐藏 input 由程序赋值),需显式重置幂等键。
|
||||||
function selectProduct(value) {
|
function selectProduct(value) {
|
||||||
|
|||||||
Reference in new issue
Block a user