テンプレート エンジンを備えた 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も機能すると思いましたが、明らかに間違っています。
絶対にどんなフィードバックでも大いに役立ちます。ありがとう!