已解決430363個問題，去搜搜看，總會有你想問的

帶有遠程模態的Bootstrap 3

首頁猿問帶有遠程模態的Bootstrap 3

帶有遠程模態的Bootstrap 3

MySQL

ibeautiful 2019-11-17 16:12:52

帶有遠程模態的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><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>  </div> </div>誰能讓這個簡單的例子有效？

查看完整描述

3 回答

搖曳的薔薇

TA貢獻1793條經驗獲得超6個贊

關于模態的遠程選項，來自docs：

如果提供了遠程URL，則將通過jQuery的加載方法加載內容并將其注入模式元素的根目錄。

這意味著您的遠程文件應該提供完整的模態結構，而不僅僅是您想要在主體上顯示的內容。

Bootstrap 3.1更新：

在v3.1中，上述行為已更改，現在已加載遠程內容 .modal-content

看到這個演示小提琴

Boostrap 3.3更新：

此選項自v3.3.0起已棄用，并已在v4中刪除。我們建議使用客戶端模板或數據綁定框架，或者自己調用jQuery.load。

反對回復 2019-11-18

寶慕林4294392

TA貢獻2021條經驗獲得超8個贊

對于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分鐘的修補時間。

反對回復 2019-11-18

GCT1015

TA貢獻1827條經驗獲得超4個贊

如果您不想發送完整的模態結構，您可以復制舊的行為，執行以下操作：

// 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();});

反對回復 2019-11-18

3 回答
0 關注
518 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

帶有遠程模態的Bootstrap 3

帶有遠程模態的Bootstrap 3

3 回答

Bootstrap 3.1更新：

Boostrap 3.3更新：

添加回答