0

我在 groovy grails 中使用 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>
4

1 回答 1

1

在和参考之间有一个缺失的<li>元素......但这不应该是重点。g:eacha

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

我不确定它是否重要，但我将模态模板呈现在下拉列表之外。我还将 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。

于 2012-04-17T06:40:31.217 回答