BootstrapのModalにiframeを読み込ませたい

こんにちは。

現在BootstrapのModal機能を使って、別ページのコンテンツを表示しようとしています。
具体的にはクリックイベント発生時、display:noneになっているiframeに別ページを読み込み
jQueryのセレクタ機能で抽出したい部分を抜き出して、それをModalに埋め込む形です。

しかし、iframeの読み込みが完了して、タグを置換している間に
非同期的にModalが表示されてしまい、初回のクリックではmodal-body部分に「undefined」の表示が出て、
二回目以降のModal表示になってようやくiframeで読み込んで抜き出した部分が表示されます。

$(obj).modal({'remote': url});を用いるとデータの埋め込みを待ってModalが表示されるようですが、
サイト全体で共有しているスクリプトによって、一瞬表示されたとたんModalが閉じられてしまいます。

そこでajaxのdoneのような、iframe読み込み～HTML抜き出し～modal-body埋め込みの処理の終了を待って、
modal.showをしたいのですが、やり方が分かりません。

ご存知の方がいらっしゃれば教えてください。

現在書いているソースを記載します。

html
1
2<button class="btn btn-outline btn-info modal-info" data-toggle="modal" data-id='1' data-target="#myModal_1">
3    button-text
4</button>
5<div class="modal fade" id="myModal_1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-id='1'>
6    <div class="modal-dialog">
7        <div class="modal-content">
8            <div class="modal-header">
9                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
10                <h4 class="modal-title" id="myModalLabel">title-text</h4>
11            </div>
12            <div class="modal-body" id='modal-body_1'>
13            </div>
14            <div class="modal-footer">
15                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
16            </div>
17        </div>
18        <!-- /.modal-content -->
19    </div>
20    <!-- /.modal-dialog -->
21</div>

html
1<div style="display:none">
2    <iframe id="targetIframe" src="../blank"></iframe>
3</div>

javascript
1
2$(document).on('click', '.modal-info', function(){
3    var id = $(this).attr('data-id');
4    $('#targetIframe').attr('src', 'url' + id);
5    var obj = $(this).parent();
6
7    $('#targetIframe').on('load', (function(id){
8        var targetHtml = $('#targetIframe').contents().find('#target-panel').html();
9        $('#modal-body_' + id).html(boxHtml);
10    })(id));
11});

行動規範の内容に同意します

回答1件

ベストアンサー

自前で処理するのでdata-toggle属性を外す。

HTML
1<button class="btn btn-outline btn-info modal-info" data-id='1'>
2    button-text
3</button>

data-idに保持。

JavaScript
1$(document).on('click', '.modal-info', function(event) {
2    var id = $(this).attr('data-id');
3    $('#targetIframe').attr('src', 'url' + id).attr('data-id', id);
4    return false;
5});
6$('#targetIframe').on('load', function(event) {
7    var targetHtml = $('#targetIframe').contents().find('#target-panel').html();
8    $('#modal-body_' + this.dataset.id).html(targetHtml).closest('.modal').modal();
9});
10