gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:04:31 24 4
gpt4 key购买 nike

我在这里搜索了许多 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com