Bootstrap 4 Beta 3模态框经jQuery .load()加载后无法关闭求助

看起来你遇到的问题是动态加载模态框内容后，线上环境无法触发关闭事件，本地Wamp正常但线上主机不行，这大概率是因为模态框的初始化时机和内容加载时机不匹配导致的。下面给你几个针对性的解决方案：

1. 调整模态框的加载与触发顺序 #

你的当前写法是同时用data-toggle="modal"和onClick触发加载，这会导致模态框在内容还没加载完成时就被初始化，此时关闭按钮的事件绑定可能出现异常。修改方式如下：

第一步：修改主页面的按钮代码 #

移除data-toggle="modal"属性，让点击事件完全由JS控制：

<a class="pull-right" title="Add Project" href="#myModal" onClick="loadAddProjectModal()">
  <i class="fa fa-plus text-muted" aria-hidden="true"></i>
</a>

第二步：修改JS加载函数，确保内容加载完成后再打开模态框 #

在load的回调函数里手动触发模态框显示，这样能保证Bootstrap初始化模态框时，所有内容（包括关闭按钮）都已经存在：

function loadAddProjectModal() {
  $("#myModal").load('include/modal_addProject.php', function() {
    // 内容加载完成后，手动打开模态框
    $("#myModal").modal('show');
  });
}

2. 检查线上环境的资源加载问题 #

本地正常但线上异常，往往和资源加载有关：

• 确认依赖顺序：确保jQuery在Bootstrap JS之前加载（Bootstrap 4 Beta3需要jQuery 3.1.1及以上版本）
• 检查重复加载：线上环境有没有不小心加载了两次jQuery或Bootstrap JS，这会导致事件绑定冲突
• 查看控制台报错：打开浏览器开发者工具的Console面板，看是否有404错误（比如modal_addProject.php路径不对）或JS语法错误

3. 兜底方案：手动绑定关闭事件 #

如果上面的方法都不行，可以手动给关闭按钮绑定事件委托，确保点击能触发模态框关闭：

// 在主页面的JS中添加这段代码
$(document).on('click', '[data-dismiss="modal"]', function() {
  $('#myModal').modal('hide');
});

另外，注意你主页面里的一个小错误：<h1 class="pb-2">Projects List</span>，这里的闭合标签应该是</h1>而不是</span>，虽然这不一定是模态框的问题，但修复HTML语法错误能避免一些未知的兼容性问题。

内容的提问来源于stack exchange，提问作者J. Hamdan