多個外部模態問題 - 引導3

我正在使用bootstrap3加載多個外部模態。當我在不同的模態之間切換時，我遇到了最後一個模態的內容。我遇到的另一個問題是，用於加載第一模式後某種原因close按鈕得到我已經嘗試使用不同的id tags和工作正常，但後來我最終的modal divs負載停用多個外部模態問題 - 引導3

<a href="#myModal" role="button" class="btn" data-toggle="modal" 
data-load-remote="contact/contact.html" data-isloaded="false" 
data-remote-target="#myModal">CONTACT</a> 

<a href="#myModal" role="button" class="btn" data-toggle="modal" 
data-load-remote="faq/faq.html" data-isloaded="false" 
data-remote-target="#myModal">FAQ</a> 


<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="Label" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
</div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 


$(function() { 
$('[data-load-remote]').on('click',function(e) { 
    e.preventDefault(); 
    var $this = $(this); 
    var remote = $this.data('load-remote'); 
    if (!$this.data('isloaded')) { 
     if(remote) { 
      $($this.data('remote-target')).load(remote); 
      $this.data('isloaded', true) 
     } 
    } 
}); 
});

。有沒有什麼辦法可以使用相同的div多個modals？任何人？

這裏是一個FIDDLE不加載模式在所有:(

乾杯

來源

2014-03-31 no0ne

您可能需要在打開新模式前關閉舊模式。 –

是的，因爲按鈕位於主畫布上，而模式位於頂部 - 通過切換，我的意思是關閉並打開一個新的 – no0ne

好的。你的意思是最後一個模態的內容保持在模態中？加載方法實際上可能附加內容可能是可能的嗎？模態HTML對於所有模態都是相同的。加載前嘗試清空'.modal-content'。 –

一個適當的模態應包括modal-header，modal-title，modal-body和伴隨用於關閉按鈕元件modal-footer。

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="Label" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> <!-- bootstrap class for header in modal --> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <!-- bootstrap close button in modal header --> 
     <h4 class="modal-title"></h4> <!-- bootstrap class modal title --> 
     </div> 
     <div class="modal-body"> <!-- bootstrap class for modal content --> 

     </div> 
     <div class="modal-footer"> <!-- bootstrap class for footer and close button in modal --> 
     <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cleanupTheModal()">Close</button> 
     </div> 
</div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
</div><!-- /.modal -->

這裏是一個更新的小提琴雖然不使用你所描述的方法，但它提供了一個額外的選項l爲不同的模式提供不同的內容。

http://jsfiddle.net/wGkLT/2/

來源

2014-03-31 20:38:51 captainrad

感謝您的努力，但我需要加載外部內容。 – no0ne

多個外部模態問題 - 引導3

回答

相關問題