代码之家  ›  专栏  ›  技术社区  ›  user2178964

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

  •  9
  • user2178964  · 技术社区  · 13 年前

    我使用Symfony和boostrap来定制我的网站风格。 我有一个trick文件:register_content.html.twig,它包含一个寄存器形式。

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

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

    在模式窗口中显示注册表形式的内容,但它不起作用。

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

    但我找不到一种方法可以很容易地将其应用于symfony中的树枝。。。

    你能帮我吗?

    谢谢

    1 回复  |  直到 8 年前
        1
  •  11
  •   GabLeRoux Tidder Jail    11 年前

    你的问题与symfony或trick完全无关。你失踪了 数据属性 让模态工作起来!

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

    1. 将登记表集成到您的 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>
      
    2. 您也可以通过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页面中的html页面),也不是一个好主意。