帶有遠程模態的Bootstrap 3我剛開始使用新的Twitter Bootstrap版本啟動一個新項目：bootstrap 3.我不能讓Modal在遠程模式下工作。我只是希望當我點擊一個鏈接時，它會顯示帶有遠程網址內容的模態。它工作但模態布局完全被破壞。這是一個jsfiddle的鏈接：http：//jsfiddle.net/NUCgp/5/代碼 ：<a data-toggle="modal" href="http://fiddle.jshell.net/Sherbrow/bHmRB/0/show/" data-target="#myModal">Click me !</a><!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body"><div class="te"></div></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog --></div><!-- /.modal -->誰能讓這個簡單的例子有效？
3 回答
米琪卡哇伊
TA貢獻1998條經驗 獲得超6個贊
關于模態的遠程選項，來自docs：
如果提供了遠程URL，則將通過jQuery的加載方法加載內容并將其注入模式元素的根目錄。
這意味著您的遠程文件應該提供完整的模態結構，而不僅僅是您想要在主體上顯示的內容。
Bootstrap 3.1更新：
在v3.1中，上述行為已更改，現在已加載遠程內容 .modal-content
看到這個演示小提琴
Boostrap 3.3更新：
此選項自v3.3.0起已棄用，并已在v4中刪除。我們建議使用客戶端模板或數據綁定框架，或者自己調用jQuery.load。
白衣染霜花
TA貢獻1796條經驗 獲得超10個贊
對于Bootstrap 3
我必須處理的工作流程是使用可能更改的URL上下文加載內容。因此，默認情況下，使用javascript或您要顯示的默認上下文的href設置模態：
$('#myModal').modal({
show: false,
remote: 'some/context'});摧毀模態對我來說不起作用，因為我沒有從同一個遙控器加載，因此我不得不：
$(".some-action-class").on('click', function () {
$('#myModal').removeData('bs.modal');
$('#myModal').modal({remote: 'some/new/context?p=' + $(this).attr('buttonAttr') });
$('#myModal').modal('show');});這當然很容易被重構為一個js庫，并為你提供了很多加載模態的靈活性
我希望這能節省15分鐘的修補時間。
蠱毒傳說
TA貢獻1895條經驗 獲得超3個贊
如果您不想發送完整的模態結構，您可以復制舊的行為，執行以下操作：
// this is just an example, remember to adapt the selectors to your code!$('.modal-link').click(function(e) {
var modal = $('#modal'), modalBody = $('#modal .modal-body');
modal
.on('show.bs.modal', function () {
modalBody.load(e.currentTarget.href)
})
.modal();
e.preventDefault();});添加回答
舉報
0/150
提交
取消