我正在尝试使用 Bootstrap 3 中的 Modal 功能来显示我的 Youtube 视频。它有效,但我无法点击 Youtube 视频中的任何按钮。
对此有什么帮助吗?
这是我的代码:
<div id="link">My video</div> <div id="myModal" class="modal fade" 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> </div> <div class="modal-body"> <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe> </div> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script> <script src="js/bootstrap.min.js"></script> <script> $('#link').click(function () { var src = 'http://www.youtube.com/v/FSi2fJALDyQ&autoplay=1'; $('#myModal').modal('show'); $('#myModal iframe').attr('src', src); }); $('#myModal button').click(function () { $('#myModal iframe').removeAttr('src'); }); </script>
我发现这个问题(或我在https://github.com/twbs/bootstrap/issues/10489发现和描述的问题)与类上的 CSS3 转换(翻译)有关.modal.fade .modal-dialog。
.modal.fade .modal-dialog
在 bootstrap.css 中,您将找到如下所示的行:
.modal.fade .modal-dialog { -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }
用以下内容替换这些行将正确显示电影(在我的情况下):
.modal.fade .modal-dialog { -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .modal.in .modal-dialog { }