css - 喜欢按钮 - 使弹出框出现在框上

Question

我在页脚中创建了一些带有 facebook like 按钮的网站。

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

这样就不会发生这种情况。

我怎么能定位像按钮一样实现的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 的内容而不使用相同的来源政策。显然有很多方法可以规避同源政策，但它可能比这样的事情更令人头疼。

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

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

您还需要从#footer 中删除溢出：隐藏。

你应该最终得到这个：

我知道这并不理想，但鉴于 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;
    }
}

Answer 2

a) 你应该改变你的页脚的高度，它不会影响你的设计，甚至你的响应选项，它可能是这样的：

#footer {
margin-left: 0;
height: 230px;
background: #fff;
border-top: 1px solid whiteSmoke;
}

或... b) 您可以在侧边栏中放置点赞按钮而不更改任何 CSS，我将看起来像这样：

http://puu.sh/3Srmq.png

Answer 3

我也有一个折中的解决方案。

用户点击like按钮后，滚动窗口直到小部件完全由回调函数显示。

代码看起来像

FB.Event.subscribe('edge.create', function(response) {
    $('html, body').animate({
        scrollTop : $("#yourFacebookWidgetID").offset().top + 170 //add offset.
    }, 10);
});

这是小提琴。（我借了这个实例，很久以前有人做了。）

这是屏幕截图。点击赞按钮后，就在自动滚动之前。

这是自动滚动完成后的画面。

请注意最后一个赞按钮。

---

编辑：添加 170px 偏移量。

添加屏幕截图。

Answer 4

这对我来说是有效的。

.wrap-parent {
   zoom: 1; //or your clearfix class
}

.wrap {
 overflow: visible;
}

html将类似于

<div class='wrap-parent>
  <div class='wrap'>
     <!-- button here -->
  </div>
</div>