Bootstrap Modal在$(window).load事件中无法自动弹出问题求助

• jQuery符号$被占用冲突
  不少站点会同时引入多个JS库，其他库可能占用了$符号作为全局变量，导致你的代码调用失败。你可以先替换为全写jQuery测试是否生效：

jQuery(window).on('load', function() {
    jQuery('#myDiscountModal').modal('show');
});

如果测试生效，可通过闭包形式兼容$的使用：

(function($){
    $(window).on('load', function() {
        $('#myDiscountModal').modal('show');
    });
})(jQuery);

• Bootstrap版本适配问题
  如果你的站点使用的是Bootstrap 5版本，该版本默认不依赖jQuery，内置的data属性触发逻辑可正常响应按钮点击，但jQuery的modal()方法默认不会注册，直接调用会失效。此时可使用Bootstrap 5原生的API调用modal：

window.addEventListener('load', function(){
    const modalDom = document.getElementById('myDiscountModal');
    const discountModal = new bootstrap.Modal(modalDom);
    discountModal.show();
});

• 脚本加载顺序问题
  确认jQuery的加载顺序早于Bootstrap的JS文件，如果Bootstrap JS加载完成后才引入jQuery，Bootstrap不会将modal相关方法挂载到jQuery对象上，会导致modal()方法调用失败。你可以打开浏览器F12控制台，刷新页面后查看是否有modal is not a function类的报错，即可验证该问题。

• 时序冲突问题
  部分站点会在window.load事件触发后，有其他脚本对DOM节点做修改操作，导致modal调用被覆盖。可添加短延时测试是否是该问题：

jQuery(window).on('load', function() {
    setTimeout(() => {
        jQuery('#myDiscountModal').modal('show');
    }, 100);
});

内容的提问来源于stack exchange，提问作者Bilal Arshad