首頁(yè) 猿問(wèn) 帶有遠(yuǎn)程模態(tài)的Bootstrap 3

帶有遠(yuǎn)程模態(tài)的Bootstrap 3

MySQL

ibeautiful 2019-11-17 16:12:52

帶有遠(yuǎn)程模態(tài)的Bootstrap 3我剛開(kāi)始使用新的Twitter Bootstrap版本啟動(dòng)一個(gè)新項(xiàng)目：bootstrap 3.我不能讓Modal在遠(yuǎn)程模式下工作。我只是希望當(dāng)我點(diǎn)擊一個(gè)鏈接時(shí)，它會(huì)顯示帶有遠(yuǎn)程網(wǎng)址內(nèi)容的模態(tài)。它工作但模態(tài)布局完全被破壞。這是一個(gè)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>誰(shuí)能讓這個(gè)簡(jiǎn)單的例子有效？

查看完整描述

3 回答

搖曳的薔薇

TA貢獻(xiàn)1793條經(jīng)驗(yàn) 獲得超6個(gè)贊

關(guān)于模態(tài)的遠(yuǎn)程選項(xiàng)，來(lái)自docs：

如果提供了遠(yuǎn)程URL，則將通過(guò)jQuery的加載方法加載內(nèi)容并將其注入模式元素的根目錄。

這意味著您的遠(yuǎn)程文件應(yīng)該提供完整的模態(tài)結(jié)構(gòu)，而不僅僅是您想要在主體上顯示的內(nèi)容。

Bootstrap 3.1更新：

在v3.1中，上述行為已更改，現(xiàn)在已加載遠(yuǎn)程內(nèi)容 .modal-content

看到這個(gè)演示小提琴

Boostrap 3.3更新：

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

反對(duì) 回復(fù) 2019-11-18

寶慕林4294392

TA貢獻(xiàn)2021條經(jīng)驗(yàn) 獲得超8個(gè)贊

對(duì)于Bootstrap 3

我必須處理的工作流程是使用可能更改的URL上下文加載內(nèi)容。因此，默認(rèn)情況下，使用javascript或您要顯示的默認(rèn)上下文的href設(shè)置模態(tài)：

$('#myModal').modal({
        show: false,
        remote: 'some/context'});

摧毀模態(tài)對(duì)我來(lái)說(shuō)不起作用，因?yàn)槲覜](méi)有從同一個(gè)遙控器加載，因此我不得不：

$(".some-action-class").on('click', function () {
        $('#myModal').removeData('bs.modal');
        $('#myModal').modal({remote: 'some/new/context?p=' + $(this).attr('buttonAttr') });
        $('#myModal').modal('show');});

這當(dāng)然很容易被重構(gòu)為一個(gè)js庫(kù)，并為你提供了很多加載模態(tài)的靈活性

我希望這能節(jié)省15分鐘的修補(bǔ)時(shí)間。

反對(duì) 回復(fù) 2019-11-18

GCT1015

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個(gè)贊

如果您不想發(fā)送完整的模態(tài)結(jié)構(gòu)，您可以復(fù)制舊的行為，執(zhí)行以下操作：

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

反對(duì) 回復(fù) 2019-11-18