1

テンプレート エンジンを備えた PHP フレームワーク (Fat Free F3) を使用して、作業中のデザインをつなぎ合わせています。メイン テンプレートとすべての .js ファイルは、layout.htm に読み込まれています。layout.htm の内部には、クリックすると、URL のコンテンツがブートストラップ モーダル ウィンドウ内に表示されるようにするリンクがあります。以下はそのコードです:

<a href="/this/is/my/url" class="btn black mini icn-only" data-toggle="docs"><i class="icon-lock icon-large icon-white"></i></a>

<script>    
$(document).ready(function() { 
    $('[data-toggle="docs"]').click(function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        if (url.indexOf('#') == 0) {
            $(url).modal('open');
        } else {
            $.get(url, function(data) {
                $('<div class="modal container hide fade" tabindex="-1" data-width="820"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button><h3 class="page-title">Title! <small> small txt</small></h3></div><div class="modal-body">' + data + '</div></div>').modal();
            }).success(function() { $('input:text:visible:first').focus(); });
        }
    });
</script>

この URL (/this/is/my/url) 内で、次のコードを使用してブートストラップ ツールチップ機能を使用しようとしています。

<button class="btn tooltips" data-placement="top" data-original-title="Tooltip in top">Top</button>

ツールチップはモーダル ウィンドウ内には表示されませんが、モーダル ウィンドウ外のメイン ページに追加すると機能します。私の質問は、このテンプレート エンジンを使用しているときにモーダル ウィンドウ内でツールチップ (またはその他のブートストラップ jquery イベント) を機能させるにはどうすればよいですか? モーダル ウィンドウ内でブートストラップ .js ファイルをリロードする必要がありますか?

私を混乱させているのは、モーダルウィンドウにブートストラップテーブルが含まれているため、css が正常に動作しているように見えることです。jqueryも機能すると思いましたが、明らかに間違っています。

絶対にどんなフィードバックでも大いに役立ちます。ありがとう!

4

1 に答える 1