如何使用 Twig 模板和 Twitter-Bootstrap 创建模态窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15867580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How create modal window with Twig template and Twitter-Bootstrap
提问by user2178964
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.
我使用 Symfony 和 boostrap 来定制我网站的风格。我有一个 Twig 文件：register_content.html.twig，其中包含一个注册表。
In my index.html.twig I want to have something like that :
在我的 index.html.twig 我想要这样的东西：
<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.
在模态窗口中显示注册表的内容，但不起作用。
I try to use the twitter-bootstrap documentation here : http://bootstrap.braincrafted.com/javascript#modals
我尝试在此处使用 twitter-bootstrap 文档：http: //bootstrap.braincrafted.com/javascript#modals
But I can't find a way to apply it easily for twig in symfony...
但是我找不到一种方法可以轻松地将它应用于 symfony 中的树枝...
Could you help me ?
你可以帮帮我吗 ？
Thanks
谢谢
回答by Sgoettschkes
Your problem is totally unrelated to symfony or twig. You are missing data-attributesfor the modal to work!
您的问题与 symfony 或 twig 完全无关。您缺少模式工作的数据属性！
You can do it the following ways:
您可以通过以下方式进行操作：
Integrate the register form inside your
index.htmlin 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>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>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.
将注册表格集成到您
index.html的模态框中，并遵循静态模态框的引导程序示例：<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 内的 html-page）也不是一个好主意。
