html - Facebook 点赞按钮 - 评论框 "flyout"无响应

标签 html css facebook twitter-bootstrap-3

我在这里搜索了许多 FB 之类的按钮线程,但看不到这个问题。

我已经按照 FB 开发人员的说明在我的页面上添加了一个 FB 赞按钮。

JS Fiddle 在这里:http://jsfiddle.net/kitsonbroadhurst/9hamfavb/2/

我一直在像这样使用 bootstrap 来布置我的页面:

HTML

<body>
<div id="fb-root"></div>
    <script>
        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>

<div class="container-fluid">
    <div class="row">
    <!-- Social Media Bar -->
        <div class="col-xs-1 col-xs-offset-1">
            <div class="a social-media">
                <div class="a fb-like" data-href="https://enhanceddd.com/article.html" data-width="55" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>
            </div>
        </div>
        <!-- Main Article -->
                <div class="col-xs-6">
                    <h1>Article Title Goes Here</h1>
                    <img class="a img-main" src="" alt="Article image"/>
                    <h2>First Title - Right here!</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dolor eget tortor auctor ornaquam imperdiet arcu tellus, eu pretium lacus dignissim eget. Curabitur viverra mollis viverra. Etiam eget quam diam. Integer facilisis odio sit amet commodo placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <!-- Sidebar Right - Article Links -->
                <div class="relevant-articles col-xs-2 col-xs-offset-1">
                    <img class="img-relevant" src="images/other-articles400.png" alt="Holding Image"/>
                    <img class="img-relevant" src="images/other-articles400.png" alt="Holding Image"/>
                    <img class="img-relevant" src="images/other-articles400.png" alt="Holding Image"/>
                </div>
            </div>
    </div>
</body>

CSS

.social-media {
  top: 150px;
  height: 300px;
  width: 65px;
  padding-left: 5px;
  position: fixed;
}

.img-main {
  height: 400px;
  width: 400px;
}

.relevant-articles {
  margin-top: 50px;
  height: 800px;
}

.img-relevant {
  position: relative;
  height: 200px;
  width: 200px;
  margin-top: 25px;
  margin-bottom: 25px;
}

当用户点击赞时,评论“弹出”选项出现但没有响应。它显示在右侧主要内容 div 的后面。

谁能帮我确保“弹出”评论总是在最前面?

我尝试对社交媒体栏应用更高的 z-index,但没有效果。

注意:必须先点赞再确认才能看到问题,点赞不会出现在你的FB时间线上!

最佳答案

我已经审查了 z-index 的使用,并设法让它发挥作用。

我对社交媒体“包装器”div 应用了 2 的 z-index,它使类似的“浮出控件”保持在顶部!

.social-media {
  top: 150px;
  height: 300px;
  width: 65px;
  padding-left: 5px;
  position: fixed;
  z-index: 2;
}

JSFiddle:http://jsfiddle.net/kitsonbroadhurst/9hamfavb/3/

抱歉我缺乏 CSS 知识!

关于html - Facebook 点赞按钮 - 评论框 "flyout"无响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25231505/

相关文章:

html - 使用纯 CSS 使单选组标签与单选按钮很好地内联显示

javascript - 访问 DOM 元素时 window.element 和 element 之间有什么区别

android - 无法为 android 初始化 LoginButton Facebook-sdk

facebook - FB 共享对话框中的自定义消息

facebook - 发布到用户的 Facebook 新闻提要而不发布到他的墙上

html - html5 Canvas 中的 "snake"。数学曲线问题

python - 提交时刷新表单 - Django

css - Div 在另一个 div 中不可见

css - 谷歌浏览器中的文本字段 CSS 边框行为不当

html - 将 html 链接 anchor 与 css 悬停相结合