Question

我在groovy grails中使用twitter boot-strap库，目前可以同时使用模态和下拉列表，但不能在另一个内部使用。这是我正在编写的代码，它非常接近，当我点击下拉列表中的内容时，会出现一个伪模式，它会将屏幕变为黑色（透明度包含在模态中）但不显示带有信息的框我提供。另外我注意到用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 })

也许其中一些提示有帮助...

微米。

下拉列表中的Twitter引导模式

1 个答案: