twitter-bootstrap - 如何使用 Twig 模板和 Twitter-Bootstrap 创建模态窗口

Question

我使用 Symfony 和 boostrap 来定制我的网站的风格。
我有一个 Twig 文件: register_content.html.twig ，其中包含一个注册表单。

在我的 index.html.twig 我想要这样的东西:

<a href="{{ path('fos_user_registration_register') }}" class="btn" data-toggle="modal">Je m'inscris !</a>

在模态窗口中显示注册表单的内容，但它不起作用。

我尝试在这里使用 twitter-bootstrap 文档:
http://bootstrap.braincrafted.com/javascript#modals

但是我找不到一种方法可以轻松地将它应用于 symfony 中的 Twig ...

你可以帮帮我吗 ？

谢谢

Answer 1

您的问题与 symfony 或 twig 完全无关。你不见了数据属性 为了模态工作!

您可以通过以下方式进行操作:

将注册表集成到您的 index.html 中在模态框中并遵循静态模态框的 Bootstrap 示例:

<button type="button" data-toggle="modal" data-target="#myModal">I register !</button>

<div id="myModal" class="modal hide fade">
    <!-- register form here -->
</div>

您还可以通过 ajax 加载注册表单的内容。在这种情况下，请参阅模态的远程选项:

<a data-toggle="modal" href="{{ path('fos_user_registration_register') }}" data-target="#myModal">click me</a>

<div id="myModal"></div>

只需确保在针对 url 执行 ajax 请求时不发送任何布局，否则您将在 div 中拥有一个完整的 html 页面，这既不是有效的(html-page inside html-page)也不是一个好主意。