title: Modal: load content only on click
body: <p>Using Symfony2, TWIG and Bootstrap, I would like to to display modal windows (<a href="http://getbootstrap.com/javascript/#modals" rel="nofollow">as described here</a>).</p>
  
  <p><strong>But</strong> I want to load the content of these modal only if the user click on the button to display it, not at the main page's loading.</p>
  
  <p>Context: I have a list of elements on my main page, and I would like to give the possibility to the user to have more information about some particular elements (one at a time). So the user clicks on the element, the modal shows up and details appear. As there are quite a lot of elements and the detailled info are quite heavy to load, I want to load only the necessary ones, on demand.</p>
  
  <p>I know and already use (for other things) TWIG's <code>{% include ... %}</code>,<code>{% embed ... %}</code> and <code>{% render ... %}</code>, I know how to display a TB Modal but I didn't find the way to do what I want :(</p>
  
  <hr>
  
  <p><strong>[EDIT] SOLUTION</strong></p>
  
  <p>For later reference. @Syjin's answer put me on the track but some additional details might be useful :-D</p>
  
  <p>In the main Twig page, the one with the list:</p>
  
  <pre><code>&lt;a data-toggle="modal" href="{{ path('MyBundle_MyEntity_seeModal', {'entity_id': entity.id}) }}" data-target="#myModal"&gt;Click me&lt;/a&gt;
  
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Create a new Twig template <code>seeModal.html.twig</code> with the content of the modal, as described in the doc:</p>
  
  <pre><code>  &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          ...
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Create the related route and Controller's action.</p>