Twitter bootstrap modal inドロップダウン

Question

私はgroovy grails内でtwitter boot-strapライブラリを使用していますが、現在はモーダルとドロップダウンを両方使うことができます。ここでコードを書いていますが、それはとても近いです。ドロップダウン内の何かをクリックすると擬似モーダルが表示され、画面は黒くなります（モーダルに透明度が含まれます）が、情報Iのボックスは表示されません供給される。また、私はファンドバックスを使ってさらに検査したところ、最初のモーダルセットだけが作成されていることに気付きましたが、残りはそうではありません。なぜこれが当てはまるのでしょうか？誰も助けることができますか？

コード：

   <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> 

Answer 1

ありg:eachとa参照の間に行方不明<li>要素がある...しかし、これはポイントではありません。

私もgrailsでブートストラップを使用していますが、私はまた、ナビゲーションバーのドロップダウンボタン内でモーダルを使用しますが、動作しますが（数時間かかる）。

私はそれが重要であることを知っていませんが、私はドロップダウンの外にモーダルテンプレートをレンダリングします。私はまた、モーダルdivの下のダイアログを "モーダル化"するようにjavascriptを設定しました（modal-bodyの中にはありません）。

あなたはすべての式がmyModal${courseInstance.id}${param.getProperties().key}と等しいと評価されていますか？

また、modal.jsを手動でインポートしないようにしてください（すでにbootstrap.jsにインポートされています）。これは幾分奇妙な行動を引き起こした。

私はモーダルに<div class="modal hide fade" id="...">を使用しています。これは自動的にdivを隠し、素晴らしいフェードトランジションを追加します（トランジション.jsが必要です）。 その後、コードはに削減：$('#...').modal({ keyboard: true, show : false })

たぶん、これらのヒントのいくつかは...

M.

を支援します