javascript - 像按钮一样在 facebook 顶部覆盖关闭按钮，但保留功能

Question

我一直在努力让它工作，因为我不了解整个 facebook 编码。我基本上需要的是当人们点击“vind ik leuk”按钮(又名“喜欢这个页面”)时关闭我的模式。因此，我尝试使用透明的 div 或什至是 span 来尝试它并且模式关闭但类似按钮失去功能。我想这是因为透明度本身仍然是一个颜色值。当人们喜欢 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>

Answer 1

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

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

它应该允许点击该元素。