使用引导程序 3.0 模式在 iframe 中加载动态的远程内容 [重复]

Question

我已经尝试了这里发布的关于其他问题和 stackexchange 的一些建议，但没有任何一项令我满意。

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

我无法让它正常工作。我创建了一个名为“modal.html”的单独 html 文件来测试它，其中包括一个带有正确 YouTube/Soundcloud 剪辑的 iframe。

我还尝试按照一位用户的建议在 modal-body 类中包含一个 iframe，然后让该 iFrame 加载第二个 html 页面 (modal.html)，该页面反过来也有一个 iframe 来加载 youtube播放器或 soundcloud 播放器。但是使用另一个 iframe 加载页面的 iframe 似乎不优雅，并且导致了我必须解决的其他 html/css 问题。

我也很困惑是否需要在我的标签中使用“data-remote=”，还是 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”。