Question

我知道这个问题已经被问到了，我查看了这些答案，但我似乎无法弄清楚如何在我自己的代码中实现它。在之前的一个问题上，一位善良的绅士帮助我开始：Overlaying closing button ontop of facebook like button but keep functionality

但我似乎无法让代码工作。我想要的是，如果网站检测到您已经喜欢了facebook页面，那么当页面加载时会自动显示该模式。但如果他们还没有，他们会保持这种状态。我在本地主办该网站，但很快就会上线。

这是我得到的代码：

        .fb_iframe_widget span
        {        
            overflow: initial !important;
        }

        .fb_iframe_widget iframe
        {        
            width: 340px !important;
            height: 500px !important;    
        }

    </style>

</head>

<body>

    <!-- facebook -->
    <div id="fb-root">
    </div>

    <script>

        window.fbAsyncInit = function() 
        {
            FB.init(
            {
                appId      : '202822426829643',
                xfbml      : true,
                version    : 'v2.8'
            });
            FB.AppEvents.logPageView();

            FB.Event.subscribe("edge.create", function(a, b)
            {
                document.getElementById('id00').style.display='none';
            })

        };

        (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 = "https://connect.facebook.net/nl_NL/sdk.js#xfbml=1&version=v2.8&appId=202822426829643";
            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">

                <div class="fb-page" data-href="https://www.facebook.com/we.are.kace/" data-tabs="timeline" data-width="340" data-height="70" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/we.are.kace/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/we.are.kace/">KACE</a></blockquote></div>

            </div>  

        </div>

    </div>

如果用户喜欢FB页面，模态不会消失

0 个答案: