Question

使用Symfony2，TWIG和Bootstrap，我想显示模态窗口（as described here）。

但是我想加载这些模态的内容，只有当用户点击按钮才能显示它时，而不是在主页面上加载。

上下文：我的主页上有一个元素列表，我想让用户有可能获得有关某些特定元素的更多信息（一次一个）。因此，用户单击元素，模式显示并显示详细信息。由于存在相当多的元素，并且详细信息的加载非常繁重，我想按需加载必要的元素。

我知道并且已经使用（其他事情）TWIG的{% include ... %}，{% embed ... %}和{% render ... %}，我知道如何展示TB模式，但我没有＆＃39;找到做我想做的事的方法:(

[编辑]解决方案

供以后参考。 @ 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的操作。

Answer 1

实际上答案就在docs。

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

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

而不是remote.html，您将指定一条指向渲染模态内容的路线。

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

自引导程序v4.0起，remote选项被删除。

如果你使用这个版本，这里有解决方案： Bootstrap 4 with remote Modal

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

3 个答案: