Bir Bootstrap modal divini nasıl yeniden kullanabilirim?

Question

Ben Bootstrap en kalıcı eklentisi aracılığıyla bir modal div yeniden bir sayfada farklı bağlantılar bir dizi var edebilmek istiyorum:

<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> 

Ben beklediğiniz

o düğme olarak tarz hangi (her iki bağlantıyı tıklayarak) modalını çağırır ve modalın, tıklanan düğmeye karşılık gelen sayfa (href değeri) ile yüklenmesini sağlar. Bunun yerine, modal her zaman önce tıkladığınız bağlantının içeriği ile yüklenir; modal, "diğer" bağlantının href tarafından dikte edilmesi gereken içerikle "yenilenmez".

Bunun bir Bootstrap hatası olduğunu düşünüyorum, ancak yanlış kullanıyorum diye soruyu burada soruyorum. Bir örnek için http://jsfiddle.net/jhfrench/qv5u5/'a bakın.

Answer 1

Daha fazla araştırmadan sonra, bu davranışı here ve here'dan söz eden bir kaç Bootstrap sorunu buldum. Yeniden açılmak için issue 5514 sordum.

arada, bu jQuery sorunu * yama olacaktır.

$('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; 
     } 
    ); 
});​ 

çalışan örneğin http://jsfiddle.net/jhfrench/qv5u5/51/ bakınız *

*

nedense -Için, bazen keman kısmındaki düğmeye tıkladığınızda modal boş gösterecektir. Bu, üzerinde çalıştığım uygulamada bir sorun değil, bu yüzden bu soru/cevap ile ilgili bir sorun olduğundan şüpheleniyorum.

Answer 2

yerine modal html işaretlemeleri yazmak ve javascript aracılığıyla manipüle zorunda kalmadan, her şeyi kolaylaştırmak için Bootstrap-iletişim kullanmak olacaktır:

$('.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(); 
}); 

canlı demo için buraya bakınız, size sağlanan iki URL'ler yükler sizin örnekte: http://nakupanda.github.io/bootstrap-dialog/