jQuery 3中替代load()加载Bootstrap 4 Modal远程内容的方案

很多开发者都在头疼怎么把远程内容（或者本地内容）加载到Bootstrap 4的Modal里，我这儿有个特别好用的通用方案——只需要一次脚本调用，就能在所有页面上适配加载本地或远程内容的模态框，省心又高效！

关键注意事项 #

• 要同时兼容本地和远程模态框的话，本地模态框绝对不能带href属性，哪怕属性值是哈希值（比如#myModal）也不行哦，不然会被当成远程内容处理。
• 这个脚本可以放在页脚的公共文件里，或者你习惯的页面脚本加载位置就行，不用每个页面重复写。

通用脚本示例 #

// 适配本地/远程内容的Bootstrap 4 Modal脚本
$(document).on('click', '[data-toggle="modal"]', function(e) {
  const $trigger = $(this);
  const modalTarget = $trigger.attr('data-target');
  const remoteUrl = $trigger.attr('href');

  // 处理远程内容加载
  if (remoteUrl) {
    // 将远程内容加载到模态框的body区域
    $(`${modalTarget} .modal-body`).load(remoteUrl, function() {
      $(modalTarget).modal('show');
    });
    e.preventDefault(); // 阻止默认跳转行为
  } else {
    // 本地模态框直接显示
    $(modalTarget).modal('show');
  }
});

这个脚本的逻辑很直观：监听所有带data-toggle="modal"属性的触发元素，判断元素是否带有href属性——如果有，就把对应URL的内容加载到目标模态框的.modal-body容器里，加载完成后再显示模态框；如果没有href属性，就直接显示本地的模态框。

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