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 (a

Solution 1:

Try adding this CSS rule to your transparent button:

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

It should allow clicking through that element.

Solution 2:

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

Solution 3:

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.