重叠Facebook上的关闭按钮像按钮，但保持功能 [英] Overlaying closing button ontop of facebook like button but keep functionality

问题描述

我一直试图让这个工作，因为我不明白整个facebook编码。所有我基本需要的是当人们点击vind ik leuk按钮（又名像这个页面）时关闭的模式。所以我试图用透明的div或甚至跨度来做这件事，模式关闭，但类似的按钮失去功能。我想这是因为透明度本身仍然是一种颜色价值。我的代码我尝试过:(有一个开放的脚本标记，但由于某种原因它不会显示在这里）$（$）$ $ $ $ $ $ $ $


pre $ $ $ $ c $ window.fbAsyncInit = function（）
{
FB.init（
{
appId：'202822426829643'，
xfbml：true，
version：'v2.8'
}）;
FB.AppEvents.logPageView（）;
};

（函数（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 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>类似于kace运动facebook通知adventskalender te gebruiken< / b>< / h3>

< / header>

< div class =w3-container w3-padding-32>


< iframe style =float：left; margin-left：0px; z-index：0src =https://www.facebook.com/plugins/page.php?href = HTTPS％3A％2F％2Fwww.facebook.com％2Fwe.are.kace％2F％3Fpnref％3Dlhc&安培;凸片=时间轴&安培;宽度= 180安培;高度= 125安培; small_header =假安培; adapt_container_width =真安培; hide_cover =假安培; show_facepile = false& appId = 202822426829643width =180height =125style =border：none; overflow：hiddenscrolling =noframeborder =0allowTransparency =true>< / iframe>

< / div>

< / div>

< / div>

解决方案

尝试将此CSS规则添加到透明按钮：

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

它应该允许点击该元素。

I've been trying to get this working because I don't understand the whole facebook coding. All I basicly need is my modal to close when people click on the "vind ik leuk" button (aka "like this page"). So I tried to do this with a transparent div or even a span to try it out and the modal closes but the like button loses functionality. I suppose it's because transparancy itself is still a color value. How can I close my modal when people like the facebook page?

My code I tried: (there is a opening script tag but it wont display here for some reason)

        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>

解决方案

Try adding this CSS rule to your transparent button:

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

It should allow clicking through that element.

这篇关于重叠Facebook上的关闭按钮像按钮，但保持功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！