如何使用 Twig 模板和 Twitter-Bootstrap 创建模态窗口 [英] How create modal window with Twig template and Twitter-Bootstrap

问题描述

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

I use Symfony and boostrap to customize the style of my website. I have a twig file : register_content.html.twig which contains a register form.

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

In my index.html.twig I want to have something like that :

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

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

To display the content of the register form in a modal window, but it doesn't work.

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

I try to use the twitter-bootstrap documentation here : http://bootstrap.braincrafted.com/javascript#modals

但是我找不到在 symfony 中轻松将其应用于 twig 的方法...

But I can't find a way to apply it easily for twig in symfony...

你能帮我吗?

谢谢

推荐答案

您的问题与 symfony 或 twig 完全无关.您缺少 data-attributes 模式才能正常工作！

Your problem is totally unrelated to symfony or twig. You are missing data-attributes for the modal to work!

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

You can do it the following ways:

1. 将 index.html 内的注册表单集成到模态框中，并遵循静态模态框的引导示例:

1. Integrate the register form inside your index.html in a modal box and following the bootstrap example for a static modal box:

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

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

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

You could also load the content for the registration form through ajax. In this case, see the remote option for modals:

<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)也不是好主意.

Just make sure to not send any layout when an ajax request is performed against the url, because otherwise you'll have a complete html page inside your div, which is neither valid (html-page inside html-page) nor a good idea.

这篇关于如何使用 Twig 模板和 Twitter-Bootstrap 创建模态窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！