grails - 下拉菜单中的 Twitter Bootstrap 模式

Question

我在 groovy grails 中使用 twitter Bootstrap 库，目前可以让模式和下拉菜单都工作，但不能在另一个里面工作。这是我正在编写的代码，它非常接近，当我单击下拉列表中的某些内容时，会出现一个伪模态，它会使屏幕变黑(模态中包含透明度)但不显示带有我的信息的框提供。此外，我在使用 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>

Answer 1

缺少 <li> g:each 之间的元素和 a引用...但这不应该是重点。

我也在使用带有 grails 的 Bootstrap ，并且我还在导航栏下拉按钮中使用了模式，它可以工作(但需要我几个小时......)。

我不确定它是否重要，但我将模态模板呈现在下拉列表之外。我还将 javascript 设置为“模态化”模态 div 下方的对话框(不在 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
})
也许其中一些技巧会有所帮助...

M。