google+ 跟随按钮在 firefox 的 bootstrap 模态中无法正确显示
google+ follow button not showing properly in bootstrap modal in firefox
我有一个 bootstrap 模态,里面有 google+ 跟随按钮,它在 google chrome 中正确显示,但在 firefox 中没有显示。我尝试放入普通页面并且它工作正常但我想要它在模态框中。
这是我的代码。
<div class="modal fade" id="sharing_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content sharing-wrapper">
<div class="modal-body sharing-body">
<img src="/assets/google-round.png" width="80px;" class="img-centered">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-follow" data-annotation="vertical-bubble" data-height="24" data-href="https://plus.google.com/104729765568883320527" data-rel="publisher"></div>
</div>
</div>
</div>
</div>
问题出在 bootstrap 模式的样式 "display: none" 上。因此,google+ 关注按钮在 Firefox 中无法计算出正确的大小。
作为解决方法,您可以将 css 样式覆盖为 "display: block",并在页面加载后将其设置回 "display: none"。
示例CSS:
#sharing_modal
{
display: block;
}
示例 JS (JQuery):
$( document ).ready(function() {
$('#sharing_modal').css('display', 'none');
});
看到这个Fiddle:http://jsfiddle.net/rvuqyjf9/1/
我有一个 bootstrap 模态,里面有 google+ 跟随按钮,它在 google chrome 中正确显示,但在 firefox 中没有显示。我尝试放入普通页面并且它工作正常但我想要它在模态框中。
这是我的代码。
<div class="modal fade" id="sharing_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content sharing-wrapper">
<div class="modal-body sharing-body">
<img src="/assets/google-round.png" width="80px;" class="img-centered">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-follow" data-annotation="vertical-bubble" data-height="24" data-href="https://plus.google.com/104729765568883320527" data-rel="publisher"></div>
</div>
</div>
</div>
</div>
问题出在 bootstrap 模式的样式 "display: none" 上。因此,google+ 关注按钮在 Firefox 中无法计算出正确的大小。
作为解决方法,您可以将 css 样式覆盖为 "display: block",并在页面加载后将其设置回 "display: none"。
示例CSS:
#sharing_modal
{
display: block;
}
示例 JS (JQuery):
$( document ).ready(function() {
$('#sharing_modal').css('display', 'none');
});
看到这个Fiddle:http://jsfiddle.net/rvuqyjf9/1/