Question

我已经尝试了其他问题和stackexchange上发布的一些建议，但没有任何工作令我满意。

我正在尝试将动态内容加载到模态中。具体来说，iFrame中的YouTube视频或Soundcloud音频。因此，访问该网站的任何用户都可以输入视频或音频的链接。然后模态动态加载用户链接。每个后续用户都可以在一个模态中看到彼此的链接。（为每个用户分别加载模态）

我无法让这个工作得很好。我创建了一个名为＆＃34; modal.html＆＃34;的单独的html文件。测试一下，其中包括一个带有正确的YouTube / Soundcloud剪辑的iframe。

我也试过在类模态体中包含iframe，如一个用户所建议的那样，然后让iFrame加载第二个html页面（modal.html），而后者又加载了一个iframe youtube播放器或soundcloud播放器。但是iframe加载一个带有另一个iframe的页面似乎不够优雅，并导致我必须解决的其他html / css问题。

我也很困惑我是否需要使用＆＃34; data-remote =＆＃34;在我的标签内，或者href是否足够？或者我在第一个模态中使用数据遥控器。或两者，或者其中之一？两者都没有效果。

这是我的代码：

  <a data-toggle="modal" href="modal.html" data-target="#myModal">Click me</a>

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-remote="modal.html" 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" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">

  </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

您遇到的问题的确切性质是什么？

我可能会使用jQuery .load（）方法将modal.html中的内容插入到模态中，然后打开模态。所以像这样：

$(function() {

    // intiliaze the modal but don't show it yet
    $("#myModal").modal('hide');

    $('a[data-target="#myModal"]').click(function(event) {
        event.preventDefault();
        var myModal = $('#myModal').
            modalBody = myModal.find('.modal-body');
        // load content into modal
        modalBody.load('/modal.html');
        // display modal
        myModal.modal('show');
    });

});

响应OP的问题更新：另一种方法是简单地将iframe放在.modal-body中，并将iframe的源设置为“/modal.html”。

使用bootstrap 3.0模式加载iframe中的动态远程内容

1 个答案: