模态：仅在点击时加载内容

Question

使用 Symfony2、TWIG 和 Bootstrap，我想显示模态窗口 (as described here)。

但是我只想在用户单击按钮显示它时才加载这些模式的内容，而不是在主页加载时。

上下文：我的主页上有一个元素列表，我想让用户有可能获得有关某些特定元素的更多信息（一次一个）。所以用户点击元素，模式显示和细节出现。由于元素很多，而且详细信息加载起来也很繁重，我只想按需加载必要的。

我知道并且已经使用（用于其他用途）TWIG 的{% include ... %}、{% embed ... %} 和{% render ... %}，我知道如何显示 TB 模态但我没有找到做我想做的事情的方法:(

---

[编辑] 解决方案

供以后参考。 @Syjin 的回答让我走上了正轨，但一些额外的细节可能有用:-D

在 Twig 主页面中，带有列表的页面：

<a data-toggle="modal" href="{{ path('MyBundle_MyEntity_seeModal', {'entity_id': entity.id}) }}" data-target="#myModal">Click me</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>

使用模态框的内容创建一个新的 Twig 模板seeModal.html.twig，如文档中所述：

  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>

创建相关路由和Controller的action。

Answer 1

remote 选项自 bootstrap v4.0 起已移除。

如果您使用此版本，以下是解决方案： Bootstrap 4 with remote Modal

Answer 2

IMO 实现这一目标的最佳方法是创建新的action，它将您的大量数据作为 JSON 返回。

/**
 * @Route("custom/route/{params}", name="your_route", options={"expose": true})
 */
public function getSomething($params)
{
    // your custom logic here...
    return new JsonResponse($data);
}

您还需要一些jQuery 并使用AJAX 获取内容。要使用 jQuery 生成路由，我建议 FOSJsRoutingBundle

最后，当您获取 JSON 数据时，只需将其注入您的 modal-body

Answer 3

其实答案就在docs。

您可以使用模式的remote 选项并指定应加载的路径。或者，如果您使用的是 data-api，您可以设置 href 并且内容将被动态加载（一次）。

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

代替remote.html，您可以指定一条到您呈现的模态内容的路由。