title: Twitter bootstrap modal inside of dropdown
body: <p>I'm using the twitter boot-strap library within groovy grails and can currently get both modals and dropdowns to work, but not one inside the other. Here's the code I'm writing, it's so close, when I click on something inside of the dropdown, a psuedo modal shows up, it turns the screen black (transparency included in modals) but doesn't display the box with the info I supplied. Also I've noticed upon further inspection with firebug that only the first set of modals are made but the rest aren't, I'm confused why this is the case. Can anyone help?</p>
  
  <p>Code:</p>
  
  <pre><code>             &lt;table&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
  
                          &lt;g:sortableColumn property="name" title="${message(code: 'course.name.label', default: 'Name')}" /&gt;
  
                          &lt;g:sortableColumn property="description" title="${message(code: 'course.description.label', default: 'Description')}" /&gt;
  
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  &lt;g:each in="${courseInstanceList}" status="i" var="courseInstance"&gt;
  
                      &lt;tr class="${(i % 2) == 0 ? 'odd' : 'even'}"&gt;
                      &lt;td&gt;
                                              &lt;ul class="nav nav-pills"&gt;
                                          &lt;li class="dropdown" id="menu${courseInstance.id}"&gt;
                                          &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu${courseInstance.id}"&gt;
                                            ${courseInstance.name}
                                            &lt;b class="caret"&gt;&lt;/b&gt;
                                          &lt;/a&gt;
                                          &lt;ul class="dropdown-menu"&gt;
                                                  &lt;g:each in="${courseInstance.hasMany}" var="param"&gt;
                                                          &lt;a data-toggle="modal", href="#myModal${courseInstance.id}${param.getProperties().key}", id="${courseInstance.id}${param.getProperties().key}"&gt;${param.getProperties().key}&lt;/a&gt;
                                  &lt;div class="modal" id="myModal${courseInstance.id}${param.getProperties().key}"&gt;
                                                          &lt;div class="modal-header"&gt;
                                                          &lt;a class="close" data-dismiss="modal"&gt;x&lt;/a&gt;
                                                          &lt;h3&gt;Students in ${courseInstance.name}&lt;/h3&gt;
                                                              &lt;/div&gt;
                                                          &lt;div class="modal-body"&gt;
                                                              &lt;g:javascript&gt;
                                                              $('#myModal${courseInstance.id}${param.getProperties().key}').modal({
                                                          keyboard: true
                                                              })
                                                              $('#myModal${courseInstance.id}${param.getProperties().key}').modal('hide')
                                                              &lt;/g:javascript&gt;
                                                          &lt;/div&gt;
                                                              &lt;div class="modal-footer"&gt;
                                                          &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
                                                          &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
                                                          &lt;/div&gt;
                                                              &lt;/div&gt;
                                                          &lt;/li&gt;
                                           &lt;/g:each&gt;
                                          &lt;/td&gt;
  
  
                          &lt;td&gt;${fieldValue(bean: courseInstance, field: "description")}&lt;/td&gt;
  
                      &lt;/tr&gt;
                  &lt;/g:each&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  </code></pre>