我有一个打开弹出窗口的链接,在弹出窗口中我从一个 div 加载内容。 内容是一些 sharethis.com 按钮和由 sharethis 提供的要添加到页面的 javascript。
所以设置看起来像这样:
按钮和内容:
<a href="#share" class="btn btn-white opaque30 btn-large marginR10" id="shareHead"><i class="fa fa-share"></i> Share</a>
<div id="share_this_btns" class="hidden">
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<div class="margin-10"><span class='st_facebook_hcount margin-10' displayText='Facebook'></span></div>
<div class="margin-10"><span class='st_twitter_hcount margin-10' displayText='Tweet'></span></div>
<span class='st_pinterest_hcount' displayText='Pinterest'></span>
</div>
弹出框初始化
$('#shareHead').popover({
title : "Share",
html : true,
content : function(){
return $('#share_this_btns').html();
},
placement : 'bottom'
});
按钮可以正常显示并显示计数 - 但是,无法点击它们。
我也试过将脚本标签放在内容 div 之外,并完全删除它们(因为有第二个 sharethis 脚本实例,但具有不同的发布者 ID)。
能请教一下吗?
编辑// 它似乎时不时地工作,而无需我进行任何更改。所以脚本似乎在运行,也许是元素分层的问题?
最佳答案
好吧,我明白了。我不能只将 sharethis 数据加载到弹出窗口中,所以我所做的是: 我添加了 sharethis 提供的普通标签,并通过调用 stButtons.locateElements(); 重新初始化了按钮;
为此,我做了一个自定义回调(由 https://stackoverflow.com/a/14727204/1206437 提供),我将其称为 init。 但是,在那之后,弹出窗口的位置不正确,因为宽度在加载后发生了变化。所以我还写了一个调整所有东西大小的函数。它必须在 setTimeout 中,因为 locateElements() 似乎没有回调,因此在加载推文和分享数量后宽度再次改变。
两个 sharethis 脚本已经加载到标题中。
最终的主体代码如下所示:
打开弹出窗口的按钮
<div id="btnParent_head">
<button class="btn btn-white opaque30 btn-large marginR10" id="shareHead"><i class="fa fa-share"></i> Share</button>
<a href="#pledge" class="btn btn-main scroll"><i class="fa fa-thumbs-o-up"></i> Pledge</a>
<button href="#contact" id="contactHead" data-fancybox-href="#contactBox" class="btn btn-white opaque30 btn-large marginL10"><i class="fa fa-envelope"></i> Contact</button>
</div>
Javascript/JQuery
$(document).load(function(){
$('#shareHead').popover({
title : "Share",
html : true,
content : function(){
var text = '';
text += '<div class="margin-10"><span class="st_facebook_hcount margin-10" displayText="Facebook"></span></div>';
text += "<div class='margin-10'><span class='st_twitter_hcount margin-10' displayText='Tweet'></span></div>";
text += "<span class='st_pinterest_hcount' displayText='Pinterest'></span>";
return text;
},
placement : 'bottom',
callback : function(){
reloadStBtns(resizePopover,$('#btnParent_head .popover'),$('#shareHead'));
}
});
});
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
tmp.call(this);
if (this.options.callback) {
this.options.callback();
}
}
function reloadStBtns(callback,popover,parent) {
stButtons.locateElements();
setTimeout(function(){
callback(popover,parent);
},500);
}
function resizePopover(popover, parent) {
var i_width = parent.outerWidth();
var i_swidth = popover.outerWidth();
var i_nleft = (i_width - i_swidth)/2
popover.css({'left':i_nleft});
}
我希望有比 setTimeout 更好的解决方案,但我找不到任何东西。
关于javascript - Bootstrap Popover 中的 Share This 按钮不可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22695653/