Kindly take a look at following JS fiddle in which I am trying to load the Video URL
in an Iframe of a Twitter Bootstrap's
modal along with the title from title attr
in the modal's title bar. Kindly let me know how can I make it work?
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">×</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 -->
$(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>"));
});
Example: http://jsfiddle.net/52VtD/1766/
您可以使用以下方式在引导程序模式中打开外部链接:
<a data-target="#externalModal" href="externalmodal" role="button" data-toggle="modal">External url</a>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.