How create modal window with Twig template and Twitter-Bootstrap

问题

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.

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.

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

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

Could you help me ?

Thanks

回答1:

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:

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>

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.

来源：https://stackoverflow.com/questions/15867580/how-create-modal-window-with-twig-template-and-twitter-bootstrap

标签

twitter-bootstrap

modal-dialog

fosuserbundle