Bootstrapモーダル・ディビジョンを再利用するにはどうしたらいいですか？

Question

私は、ブートストラップのモーダルプラグインを介して、ページの再利用1つのモーダルのdivに異なるリンクの数を持ってできるようにしたいと思います：

<h3>This button shows a modal (<code>#utility</code>) with text "Phasellus <em>tincidunt gravida</em>..."</h3> 
<br /> 
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/6K8rD/show/" data-target="#utility" class="btn">Modal 1</a><br /> 
<h3>This button should invoke the same modal (<code>#utility</code>), but fill it with text "Phasellus <em>egestas est eu</em>..."</h3> 
<br /> 
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/AWSnt/show/" data-target="#utility" class="btn">Modal 2</a><br /> 

<!-- Modal --> 
<div id="utility" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    <h3 id="myModalLabel">Click outside modal to close it</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…this is getting replaced with content that comes from passed-in href</p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

私は（どちらかのリンクをクリックすると、ボタンとしてスタイルされていることを期待したいです）は、モーダルを呼び出し、クリックされたボタンに対応するページ（値href）でモーダルをロードします。その代わりに、モーダルは常に最初にクリックしたリンクの内容で読み込まれます。モーダルは "その他の"リンクのhrefによって指示されるべき内容で "リフレッシュ"されません。

私はこれがブートストラップのバグだと思っていますが、私が間違って使っている場合にはここで質問しています。

デモンストレーションについては、http://jsfiddle.net/jhfrench/qv5u5/を参照してください。

Answer 1

さらに調査した結果、この動作に言及したブートストラップの問題がいくつか見つかりましたhereとhereです。私はissue 5514を再開するように頼んだ。

一方、このjQueryのは問題*アップパッチを適用します：

$('a[data-toggle="modal"]').on('click', function(){ 
    // update modal header with contents of button that invoked the modal 
    $('#myModalLabel').html($(this).html()); 
    //fixes a bootstrap bug that prevents a modal from being reused 
    $('#utility_body').load(
     $(this).attr('href'), 
     function(response, status, xhr) { 
      if (status === 'error') { 
       //console.log('got here'); 
       $('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>'); 
      } 
      return this; 
     } 
    ); 
});​ 

を働い例えばhttp://jsfiddle.net/jhfrench/qv5u5/51/を参照してください*

*何らかの理由-for、時にはあなたはフィドルにあるボタンをクリックしたとき。モーダルは空白になります。これは私が作業しているアプリケーションでは問題ではないので、この質問/回答と無関係の問題だと思われます。

Answer 2

代わりに、モーダルのHTMLマークアップを書いて、JavaScriptでそれを操作するので、私はすべてを容易にするためにブートストラップ・ダイアログを使用します。

$('.modal-btn').click(function(event){ 
    var $link = $(this); 
    new BootstrapDialog({ 
     title : 'Load content of : ' + $link.attr('href'), 
     content : $('<div>Loading...</div>').load($link.attr('href')), 
     buttons : [{ 
      label : 'Close', 
      onclick : function(dialog){ 
       dialog.close(); 
      } 
     }, { 
      label : 'Save changes', 
      cssClass: 'btn-primary', 
      onclick : function(dialog){ 
       alert('The content of the dialog is: ' + dialog.getBody().html()); 
       dialog.close(); 
      } 
     }] 
    }).open(); 

    event.preventDefault(); 
}); 

がライブデモのためにここを参照してください、それはあなたが提供する2つのURLをロードしますあなたの例では： http://jsfiddle.net/txrM8/

は、ブートストラップ・ダイアログについての詳細を参照してください： http://nakupanda.github.io/bootstrap-dialog/