- 首页
- 前端开发
- 模态中的 Bootstrap 3 和 Youtube
模态中的 Bootstrap 3 和 Youtube
[英] Bootstrap 3 and Youtube in Modal
本文介绍了模态中的 Bootstrap 3 和 Youtube的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 Bootstrap 3 中的模态功能来显示我的 Youtube 视频.它有效，但我无法点击 Youtube 视频中的任何按钮.
对此有帮助吗?
这是我的代码:
我的视频
<div id="myModal" class="modalfade" 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 class="modal-body"><iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><脚本>window.jQuery ||document.write('<script src="js/jquery-1.10.1.min.js"></script>')</script><script src="js/bootstrap.min.js"></script><脚本>$('#link').click(function () {var src = 'http://www.youtube.com/v/FSi2fJALDyQ&autoplay=1';$('#myModal').modal('show');$('#myModal iframe').attr('src', src);});$('#myModal 按钮').click(function () {$('#myModal iframe').removeAttr('src');});
解决方案
我发现了这个问题(或者我在 https://github.com/twbs/bootstrap/issues/10489) 与 .modal.fade .modal-dialog 类上的 CSS3 转换(翻译)相关.
在 bootstrap.css 中，您将找到如下所示的行:
.modal.fade .modal-dialog {-webkit-transform: 翻译 (0, -25%);-ms-transform: 翻译 (0, -25%);变换:翻译(0，-25%)；-webkit-transition: -webkit-transform 0.3s 缓出；-moz-transition: -moz-transform 0.3s 缓出；-o-transition: -o-transform 0.3s 缓出；过渡:转换 0.3 秒缓出；}.modal.in .modal-dialog {-webkit-transform: 翻译 (0, 0);-ms-transform: 翻译 (0, 0);变换:翻译(0, 0)；}
将这些行替换为以下内容将正确显示电影(在我的情况下):
.modal.fade .modal-dialog {-webkit-transition: -webkit-transform 0.3s 缓出；-moz-transition: -moz-transform 0.3s 缓出；-o-transition: -o-transform 0.3s 缓出；过渡:转换 0.3 秒缓出；}.modal.in .modal-dialog {}
I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. It works, but I can't click on any buttons in the Youtube video.
Any help on this?
Here's my code:
<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>
解决方案
I found this problem (or the problem I found and described at https://github.com/twbs/bootstrap/issues/10489) related to CSS3 transformation (translation) on the .modal.fade .modal-dialog class.
In bootstrap.css you will find the lines shown below:
.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);
}
Replacing these lines with the following will show the movie correctly (in my case):
.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 {
}
这篇关于模态中的 Bootstrap 3 和 Youtube的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
