Question

我在页脚中创建了几个像facebook一样的网站。

但是，您在浏览页面后显示的弹出窗口不可见，因此我想将其移动到上类似按钮。

enter image description here

这样就不会发生。

我如何定位像按钮一样实现的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中隐藏。

你应该最终得到这个：

enter image description here

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

我也有妥协的解决方案。

用户点击之后按钮，滚动窗口直到小部件完全显示回调功能。

代码看起来像

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

这是fiddle。（我借用了这个例子，很久以前有人做过。）

以下是截图。在自动滚动之前单击了like按钮。 enter image description here

这是自动滚动完成后的屏幕。 enter image description here

请注意最后一个按钮。

已编辑：添加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>

像按钮一样 - 弹出框出现在框上

4 个答案:

已编辑：添加170px偏移量。