带有远程模态的Bootstrap 3

Question

带有远程模态的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">&times;</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 -->谁能让这个简单的例子有效？

Answer 1

关于模态的远程选项，来自docs：

如果提供了远程URL，则将通过jQuery的加载方法加载内容并将其注入模式元素的根目录。

这意味着您的远程文件应该提供完整的模态结构，而不仅仅是您想要在主体上显示的内容。

Bootstrap 3.1更新：

在v3.1中，上述行为已更改，现在已加载远程内容 .modal-content

看到这个演示小提琴

Boostrap 3.3更新：

此选项自v3.3.0起已弃用，并已在v4中删除。我们建议使用客户端模板或数据绑定框架，或者自己调用jQuery.load。

Answer 2

对于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分钟的修补时间。

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