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

发布时间：2020-12-18 00:22:23 所属栏目：安全来源：网络整理

导读：我使用Symfony和boostrap来定制我的网站的风格. 我有一个twig文件：register_content.html.twig,其中包含一个注册表单. 在我的index.html.twig中我希望有类似的东西： a href="{{ path('fos_user_registration_register') }}" class="btn" data-toggle="moda

我使用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)也不是一个好主意.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!