您的位置: 首页  >  技术问答  >  如何使用Twig模板和Twitter-Bootstrap创建模态窗口

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

分类: 技术问答 • 2022-06-15 17:46:40
问题描述：

我使用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中的树枝上的方法...

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

你能帮我吗?

谢谢

答

您的问题与symfony或树枝完全无关.您缺少数据属性才能正常工作！

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加载注册表的内容.在这种情况下，请参见模态的远程选项:

  • 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内的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.

    • 相关推荐