如何在 Twitter Bootstrap 模式窗口中通过 AJAX 加载内容？答案

【问题标题】：How to load content via AJAX in a Twitter Bootstrap modal window?如何在 Twitter Bootstrap 模式窗口中通过 AJAX 加载内容？
【发布时间】：2013-11-10 12:12:25
【问题描述】：

我在 Zend Framework 2 中工作，并按照tutorial 显示和处理通过 AJAX 提交的表单。我没有使用 jQuery UI 模态，而是使用 Twitter Bootstrap 3 中的模态。

首先，我只是想通过在 modal trigger 按钮的 href 属性中指定 controller action 的路径来在模式中加载一些虚拟内容。

我调用的 AJAX 操作的 view file 包含虚拟 html。

当我点击“添加代理”时，页面变暗，但没有显示模式窗口，尽管虚拟 html 确实出现在页面的左上角。我期望 Twitter Bootstrap 模式窗口与其中的虚拟 html 一起显示。当我从模态触发按钮中删除 href 标记时，模态显示正常。

如果有人可以帮助我实现在 Twitter Bootstrap 模式窗口中加载内容的简单目标，不胜感激。

【问题讨论】：

无论您在何处插入虚拟 html，它都会破坏模态所需的标记。打开您的开发人员工具，检查生成的 html，将其与 Bootstrap 指定的内容进行比较，并进行相应调整。如果您需要更详细的建议，jsfiddle 会有所帮助。

标签： php html ajax twitter-bootstrap zend-framework2

【解决方案1】：

我的虚拟 HTML 没有显示在模态窗口中的原因是因为我为模态 div 编写了 HTML 标记，以及用于模态的页眉、正文和页脚部分的内部 div。我错误地认为我通过 AJAX 调用的内容将被插入到 modal-body div 中，但是 HTML 不会被注入到 modal-body div 中，并且因为该 div 的标记已经存在，虚拟 HTML 出现在此之外并破坏布局。

所以我删除了模态 div 中的所有内部 div 并将它们移动到远程内容中，以便我要返回的 HTML 包含在这些 div 中。

【讨论】：