How to create a modal window with a Twig template and Twitter-Bootstrap

Question

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

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

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

To display the contents of the register form in a modal window, but it does not work.

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

But I cannot find a way to easily apply it for twig in symfony ...

could you help me?

thanks

Answer 1

Your problem is not completely related to symfony or twig. You do not have enough data attributes for the modal work to work!

You can do this in the following ways:

• Integrate the registration form inside your index.html in a modal field and following the bootstrap example for a static modal window:

   <button type="button" data-toggle="modal" data-target="#myModal">I register !</button> <div id="myModal" class="modal hide fade"> <!-- register form here --> </div> 

• You can also download the content for the registration form via 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 remember to send some layout when an ajax request is made against the URL, because otherwise you will have a full html page inside your div that is neither valid (html page inside the html page), nor a good idea.