Twitter引導模式在下拉菜單中

我在groovy grails中使用了twitter引導程序庫，目前可以同時使用模式和下拉菜單來工作，但不能在其他菜單中使用。這是我正在寫的代碼，它非常接近，當我點擊下拉菜單中的某個內容時，出現一個psuedo模式，它將屏幕變成黑色（透明度包含在模式中），但不顯示包含信息I的框提供。我還注意到，在進一步檢查螢火蟲後，只有第一組模式被製作出來，但其餘的都沒有，我很困惑爲什麼會出現這種情況。誰能幫忙？Twitter引導模式在下拉菜單中

代碼：

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

來源

2012-04-15 Feng Huo

還有就是g:each和a基準之間缺少<li>元素......但是這不應該成爲問題。

我也在Grails上使用引導程序，我也在navbar下拉按鈕中使用了一個模式，它可以工作（但需要我幾個小時......）。

我不知道它的重要性，但我在下拉菜單之外渲染模態模板。我還設置了JavaScript模式化對話框下方的對話框（不在modal-body中）。

您確定無處不在表達式：myModal${courseInstance.id}${param.getProperties().key}被評估爲相同嗎？

另外請確保您不要手動導入modal.js（它已經在bootstrap.js中導入）。這造成了一些奇怪的行爲。

我使用<div class="modal hide fade" id="...">作爲模態。這個自動隱藏了div並添加了一些很好的漸變過渡（需要transitions.js）。然後代碼簡化爲：$('#...').modal({ keyboard: true, show : false })

也許一些技巧可以幫助...

來源

2012-04-17 06:40:31 matcauthon

Twitter引導模式在下拉菜單中

回答

相關問題