带有远程模态的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();});