Button 类似Facebook的按钮通过无溢出页面向下扩展

有没有办法让like按钮向上扩展而不是向下扩展，因为在我的页面上like按钮位于页脚中，我希望它要么向上扩展，要么将整个页脚向上推，使其可见。提前谢谢

您可以编辑类pluginCommentFlyoutFull的CSS。该类的top属性可以设置为负值。对于like按钮弹出中的其他HTML元素，也需要这样做。您还需要执行一些z索引，使其显示在主内容包装器上

.plugincommontyoutfull{宽度：450px；顶部：-157px；}

---

前面的答案只适用于评论。对于类似的对话框来说有点困难

对我来说，其他人没有去的地方，加载的时间，这是封锁的网页，和蓝精灵由于改变大小

我们用以下方法一石打死了4只鸟： -类似Facebook的对话框出现在Like botton的上方和顶部z索引级别
-它是完全异步的，因此不会阻塞页面，
-我们自动创建正确的url条目，以便在所有页面中使用相同的javascript，
-只有在知道实际尺寸后，它才会更新并显示

点击后的图片，如：

我们是这样做的：

1） 我们在所有页面中都包含一个“空”div，该div不是用javascript填充的：

PS：之所以有两个级别的div，是因为我稍后会将其扩展到google+、twitter等

2） 我们异步加载facebook
使用LazyLoad loader，但任何都可以，如果需要，您也可以执行同步：

LazyLoad.js（（'https:'==document.location.protocol？'https://'：'http://'））+

“connect.facebook.net/en_US/all.js”）

3） 在facebook init中，我们：

-填写专用div，

-要求fb解析插入的标签

-解析后使用超时，以确保显示已刷新，因此宽度和高度正确

window.fbAsyncInit = function() { 
        var d = document,n,nn,url,url_ref,i;`

        // due to bug in facebook need to delay the actual access to data after parse
        function FBUpdateSize(){
            var h,str;
            // show facebook entry using actual element size
            h = nn.firstChild.clientHeight;
            str = h+'px';
            nn.style.height= str;
            n.style.height= str;
            n.style.overflow='visible';
        }

        FB.init({   channelUrl : 'http://www.plixo.com.sg/channel.html',
                    //appId : '228760567272221', 
                    status     : false,
                    xfbml      : false}); 

        // create facebook entries in the DOM
        n = d.getElementById('social-media');
        url = d.URL;
        i = url.lastIndexOf('/')+1;
        url_ref = url.slice(i,url.indexOf('.',i));
        nn = d.createElement('fb-like');
        nn.innerHTML = '<div id="fb_like_bottom"><fb:like href="' + url + '" ref="' + url_ref + '" send="false" layout="standard" width="360px" show_faces="false"></fb:like></div>';
        nn = n.appendChild(nn);

        // call facebook to fill DOM entries
        // use a timeout in callback to ensure browser has refreshed internal clientHeight
        FB.XFBML.parse(nn,function(){setTimeout(FBUpdateSize,50)});
    };`

window.fbAsyninit=function（）{
var d=文档，n，nn，url，url\u ref，i`
//由于facebook存在漏洞，需要在解析后延迟对数据的实际访问
函数FBUpdateSize（）{
var-h，str；
//使用实际元素大小显示facebook条目
h=nn.firstChild.clientHeight；
str=h+'px'；
nn.style.height=str；
n、 高度=str；
n、 style.overflow='visible'；
}
FB.init（{channelUrl:'http://www.plixo.com.sg/channel.html',
//appId:'2287605672221'，
状态：false，
xfbml:false}）；
//在DOM中创建facebook条目
n=d.getElementById（“社交媒体”）；
url=d.url；
i=url.lastIndexOf（'/'）+1；
url_ref=url.slice（i，url.indexOf（'.'，i））；
nn=d.createElement（'fb-like'）；
nn.innerHTML=''；
nn=n.子对象（nn）；
//打电话给facebook填写DOM条目
//在回调中使用超时，以确保浏览器已刷新内部clientHeight
parse（nn，function（）{setTimeout（FBUpdateSize，50）}）；
};`

4） 而且只有3种专用css样式：

社交媒体{位置：相对；显示：块；宽度：自动；z索引：200；溢出：隐藏；高度：0；

背景色：#F2F2F2F2；边框：1px实心#bdc7d8}

#fb#like_底部{填充：4px；位置：绝对}

#fb#like_bottom.fb#iframe_widget_lift{bottom:0；背景色：#f2f2f2；边框：1px实心#bdc7d8

！重要；边距：-5px；填充：4px}

你可以在我们的任何网页上看到一个例子

---

欢迎重新使用/修改等，如果您链接到我们的任何页面，我们将不胜感激；-）

我在哪里可以找到CSS？我使用的是Facebook的“简单”按钮创建者，所以我实际上没有托管CSS。我用它来调用CSS和javascript<代码>（函数（d，s，id）{var js，fjs=d.getElementsByTagName（s）[0]；if（d.getElementById（id））返回；js=d.createElement（s）；js.id=id；js.src=“//connect.facebook.net/en#US/all.js#xfbml=1”；fjs.parentNode.insertBefore（js，fjs）；}（文档，“脚本”，“facebook jssdk”）我明白了。将plugincommentlyoutfull类放在您自己的样式表中，尝试覆盖它，看看是否有效。在样式表中尝试类似.fbpf.plugincommentlyout.plugincommentlyoutfull{width:450px；top:-157px；}的内容。不。。。。将它添加到我的样式表中，但它不起作用。不过，感谢您的帮助。加载样式的优先级是元素级、文档级，然后是外部。如果外部失败，您可以尝试文档级别吗？我的意思是，在同一个html文档头add.plugincommentlyoutfull{width:450px；top:-157px；}上，这似乎是可行的，但样式有缺陷，同时我将检查更多的样式。谢谢你的帮助！