Facebook "like" popup displaying behind other content
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Problem is on jmousseauphoto.com when you click the "Like" button, and a popup box appears allowing you to share the link on your timeline.

I'm hoping to find a way to have the popup be displayed in front of any and all content, no matter what. The other option would be to have the popup as a seperate window, although I'm not sure if this would be blocked by adblocker/etc.

Problems that occur in various browsers -->

a) Popup is blocked by slideshow on "home" page

b) Popup is blocked by images on "potrait" page

c) Popup box is transparent on "publishing" page, and text gets jumbled with other text

What I'm using to display it -->

<div id="fb-root"></div>
<script>(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/all.js#xfbml=1&appId=156326671193122";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

and

<fb:like overflow="visible" href="http://jmousseauphoto.com/" send="false" layout="button_count" width="90" show_faces="true" ></fb:like>

If there's any more information needed just let me know. This is my first time using Bountify and I'm willing to tip anyone who can help me solve this problem. Thanks!

Seems like weslly's solution did the trick! Will update if there's any more issues. Thanks
JMousseauPhoto almost 7 years ago
awarded to weslly

Crowdsource coding tasks.

3 Solutions


Your image slider uses a changing z-index to switch images (the top one is 10). To prevent the overlap you need to increase the z-index of the Facebook button. Try this:

<fb:like overflow="visible" href="http://jmousseauphoto.com/" send="false" layout="button_count" width="90" show_faces="true" style="z-index: 11;" ></fb:like>
Winning solution

Add this to your css file:

#col  {
    z-index: 9000;
}

Changing the z-index of the fb like button won't do anything because it's absolutely positioned and comes before the slideshow in the dom. If it was after the slideshow in the dom it would show up fine after you change the z-index. Unfortunately that would mean changing your layout completely.

View Timeline