私はGroovyGrails内でTwitterブートストラップライブラリを使用しており、現在、モーダルとドロップダウンの両方を機能させることができますが、一方を他方の内部で機能させることはできません。これが私が書いているコードです、それはとても近いです、私がドロップダウンの内側の何かをクリックすると、疑似モーダルが表示され、画面が黒くなります(モーダルに透明性が含まれています)が、情報が表示されたボックスは表示されません供給。また、firebugでさらに調べたところ、最初のモーダルセットのみが作成され、残りは作成されていないことに気付きました。なぜそうなるのか混乱しています。誰か助けてもらえますか?
コード:
<table>
<thead>
<tr>
<g:sortableColumn property="name" title="${message(code: 'course.name.label', default: 'Name')}" />
<g:sortableColumn property="description" title="${message(code: 'course.description.label', default: 'Description')}" />
</tr>
</thead>
<tbody>
<g:each in="${courseInstanceList}" status="i" var="courseInstance">
<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
<td>
<ul class="nav nav-pills">
<li class="dropdown" id="menu${courseInstance.id}">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu${courseInstance.id}">
${courseInstance.name}
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<g:each in="${courseInstance.hasMany}" var="param">
<a data-toggle="modal", href="#myModal${courseInstance.id}${param.getProperties().key}", id="${courseInstance.id}${param.getProperties().key}">${param.getProperties().key}</a>
<div class="modal" id="myModal${courseInstance.id}${param.getProperties().key}">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Students in ${courseInstance.name}</h3>
</div>
<div class="modal-body">
<g:javascript>
$('#myModal${courseInstance.id}${param.getProperties().key}').modal({
keyboard: true
})
$('#myModal${courseInstance.id}${param.getProperties().key}').modal('hide')
</g:javascript>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</li>
</g:each>
</td>
<td>${fieldValue(bean: courseInstance, field: "description")}</td>
</tr>
</g:each>
</tbody>
</table>