0

私はGroovyGrails内で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でブートストラップも使用しています。また、ナビゲーションバーのドロップダウンボタン内でモーダルを使用しています。これは機能します(ただし、数時間かかります...)。

それが重要かどうかはわかりませんが、ドロップダウンの外側にモーダルテンプレートをレンダリングします。また、モーダルdivの下のダイアログを「モーダル化」するように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 })

たぶん、これらのヒントのいくつかは役立ちます...

M。

于 2012-04-17T06:40:31.217 に答える