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

前端之家收集整理的这篇文章主要介绍了如何使用Twig模板和Twitter-Bootstrap创建模态窗口前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用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中轻松应用它…

你可以帮帮我吗 ?

谢谢

解决方法

你的问题与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 in html-page)也不是一个好主意.

猜你在找的Bootstrap相关文章