css - 点赞按钮 - 使弹出窗口出现在框上方

Question

我已经创建了一些在页脚中带有类似 facebook 按钮的网站。

但是，在您点赞页面后出现的弹出窗口不可见，因此我想将其移动到点赞按钮上。

这样就不会发生了。

我如何定位像按钮一样实现的 html5？

<div class="fb-like span6" data-href="https://www.facebook.com/pages/xxxxxx?fref=ts" data-send="true" data-width="450" data-show-faces="false" data-action="like" data-font="segoe ui"></div>

我需要为其应用什么 CSS？

Answer 1

不幸的是，你不能真正让弹出窗口独立于按钮移动，因为一旦单击按钮，它就会在 iframe 中打开小部件，你将无法影响 iframe 的内容而不用玩same origin policy .显然有 Ways to circumvent the same-origin policy但对于这样的事情来说，这可能比它真正值得的更让人头疼。

但是，如果您只想让 iframe 在窗口边缘上方打开，您可以像这样移动 iframe:

.fb_iframe_widget iframe {
    position:absolute;
    top:-165px;
    background:#fff; /* in your case you may want to add a white background */
}

此外，您还需要从#footer 中删除 overflow:hidden。

你应该这样结束:

我知道这并不理想，但考虑到 Facebook 对开发者特别友好缺乏兴趣，它可能会尽可能接近您所追求的目标。

更新:

将整个小部件包裹在一个 div 中，并将该 div 放置在您开始使用它的位置。然后您可以使用以下 CSS 来定位 iframe。

.fb_iframe_widget iframe {
    position:absolute;
    top:-165px;
    background:#fff;
    right:10px;
}
@media (min-width:1200px) {
    .fb_iframe_widget iframe {
        position:absolute;
        top:-165px;
        background:#fff;
        right:-45px;
    }
}
@media (max-width:979px) and (min-width: 768px) {
    .fb_iframe_widget iframe {
        position:absolute;
        top:-165px;
        background:#fff;
        right:110px;
    }
}
@media (max-width:767px) {
    .fb_iframe_widget iframe {
        position:absolute;
        top:-165px;
        background:#fff;
        right:0px;
    }
}