在模式中从跨度的 ID 加载单击的范围 URL

Question

>请看下面的JS小提琴，其中我正在尝试将Video URL加载到Twitter Bootstrap's模态的Iframe中以及模态标题栏中title attr的标题。请让我知道我怎样才能让它工作？

http://jsfiddle.net/52VtD/1745/

<span id="http://player.vimeo.com/video/78360422" title="Introduction to this video" class="btn btn-warning" ><a data-toggle="modal" data-target="#myModal" href="http://player.vimeo.com/video/78360422" target="ifr">1) VIDEO TO LOAD IN IFRAME # 1</a> </span><br><BR>
<span id="http://player.vimeo.com/video/53671222" title="About It" class="btn btn-warning" > 2) VIDEO TO LOAD IN IFRAME # 2 </span>
<!-- Button trigger modal --><br><BR>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
<!-- 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" id="myModalLabel">Span Title Attr Text Here</h4>
      </div>
      <div class="modal-body">
                                                                 <iframe name="ifr" src='' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
      </div>
          </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

$(document).on("click", "span.btn", function () {
     var title = $(this).prop('title'),
         id = $(this).prop('id'); 
     $(".modal-title").text(title);
     $(".modal-body").html($("<iframe src=" + id + "></iframe>"));
});

示例：http://jsfiddle.net/52VtD/1766/

Answer 2

1. 也许清理 html 代码？很难阅读:(
2. 您的第二个 A 标记目标应设置为"#ifr"作为其他两个链接（按钮）的工作方式
3. 将 iframe SRC 设置为视频链接，如下所示：，不要把它放在你的跨度 ID 中

Answer 3

您可以使用以下内容在引导模式中打开外部链接：

<a data-target="#externalModal" href="externalmodal" role="button" data-toggle="modal">External url</a>