CODEWITHSUNDEEP
javascriptjqueryhtmlcssfacebook
Eric Graventein
Eric Graventein

Reputation: 55

Overlaying closing button ontop of facebook like button but keep functionality

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>

Upvotes: 0

Views: 69

Answers (3)

Steven
Steven

Reputation: 121

pointer-events don't work pre IE11. The non-hacky way to do it is by utilizing the Facebook JS SDK you are already including. There is an edge.create event you can subscribe to.

There are a couple of caveats:

  1. You must show your page widget with the SDK instead the iframe. Get the code from here https://developers.facebook.com/docs/plugins/page-plugin
  2. The event is fired when Facebook actually processes the like request, not on button click.

Note that removing the like (clicking the button if you already liked the page) is a separate event edge.remove.

Here is an example of what you want: https://jsbin.com/yitopoyalo

Click the JSbin button in the upper right. Due to how iframes work, you can only see the output properly in a separate window and not in JSBin's live output.

Upvotes: 0

Nick De Jaeger
Nick De Jaeger

Reputation: 1249

Put a 'pointer-events: none;' on the overlapping div/span.

Upvotes: 0

Vaidas
Vaidas

Reputation: 1503

Try adding this CSS rule to your transparent button:

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

It should allow clicking through that element.

Upvotes: 1

Related Questions