在facebook喜欢按钮的顶部覆盖关闭按钮，但保持功能

Overlaying closing button ontop of facebook like button but keep functionality

本文关键字：功能 关闭按钮 覆盖 喜欢 facebook 按钮 顶部      更新时间：2023-09-26

我一直试图得到这个工作，因为我不理解整个facebook编码。所有我基本上需要的是我的模态关闭时，人们点击"vind like leuk"按钮(又名"喜欢这个页面")。所以我试着用一个透明的div甚至一个span来尝试，模态关闭了，但是like按钮失去了功能。我想这是因为透明度本身仍然是一个颜色值。当人们喜欢facebook页面时，我该如何关闭我的模式?

我的代码我试过:(有一个开放的脚本标签，但它不会显示在这里由于某种原因)

        window.fbAsyncInit = function() 
        {
            FB.init(
            {
                appId      : '202822426829643',
                xfbml      : true,
                version    : 'v2.8'
            });
            FB.AppEvents.logPageView();
        };
        (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_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }
        (document, 'script', 'facebook-jssdk'));
    </script>
    <!-- facebook -->
    <div id="id00" style="z-index: 3; padding-top: 100px; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4)">
        <div class="w3-modal-content w3-animate-top w3-card-2">
            <header class="w3-container w3-yellow">
                <span onclick="document.getElementById('id00').style.display='none'" class="w3-closebtn">&times;</span>
                <h3><b>like kace op facebook om onze adventskalender te gebruiken</b></h3>
            </header>
            <div class="w3-container w3-padding-32">
                <span class="w3-transparent" style="width: 100px; height: 23px; margin-left: -390px; margin-top: 98px; float: left; z-index: 10; position: fixed" onclick="document.getElementById('id00').style.display='none'"></span>
                <iframe style="float: left; margin-left: 0px; z-index: 0" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fwe.are.kace%2F%3Fpnref%3Dlhc&tabs=timeline&width=180&height=125&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=202822426829643" width="180" height="125" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
            </div>
        </div>
    </div>

尝试将这个CSS规则添加到您的透明按钮中:

.w3-transparent {
    pointer-events: none;
}

在重叠的div/span上添加一个'pointer-events: none;'

pointer-events在IE11之前不能工作。最简单的方法是利用你已经包含的Facebook JS SDK。有一条边。创建可以订阅的事件。

有几个注意事项:

  1. 你必须用SDK代替iframe来显示你的页面小部件。从这里获取代码https://developers.facebook.com/docs/plugins/page-plugin
  2. 当Facebook实际处理like请求时触发事件，而不是点击按钮。

注意，删除点赞(如果你已经点赞了这个页面，点击按钮)是一个单独的事件edge.remove。

下面是你想要的一个例子:https://jsbin.com/yitopoyalo

单击右上方的JSbin按钮。由于iframes的工作方式，您只能在单独的窗口中正确地看到输出，而不能在JSBin的实时输出中看到输出。

相关文章：