Unable to Close Fancybox iFrame

Question

My issue is available at http://www.jeremiahbenes.com/#/portfolio by clicking on one of the tiles. I tested this in the latest release of Chrome for Mac and experienced the issue described below.

I have implemented fancybox, but when the iFrame appears, I am unable to close it. The "x" in the top-right corner appears to be unclickable. Here is what I have for my implementation:

<a data-fancybox-type="iframe" class="fancybox fancybox.iframe plink" href="http://gegarageenvy.com">
  <span>GE Garage Envy</span>
</a>

The code I have for Fancybox is:

<script type="text/rocketscript" data-rocketoptimized="true">
    $(document).ready(function() {
        $('.fancybox').fancybox();
    }); 
</script>

Why does it not close?

(On another note, how can I set it to automatically take up 95% of available height and width? I tried using autosize, but that does not work).

Thanks for your help.

NZ Mikey · Accepted Answer · 2014-10-12T21:50:57.587

3

There is a class in your body tag which is disabling pointer events, which is stopping you from being able to click anything inside that fancybox,

.impress-enabled {
   pointer-events: none;
}

If you remove this class from the body, then everything inside of fancybox become clickable.

Otherwise you can add,

pointer-events: auto !important;

to the CSS of .fancybox-wrap.

edited Oct 12 '14 at 21:50

answered Oct 12 '14 at 21:35

NZ Mikey

126
5

Please don't post anything as an answer until you actually have an answer; referring to your initial posting, which was nothing more than a comment. You will trigger unnecessary flags creating work for the moderators. It's really not a problem that the OP is "in the dark" until a real answer comes. You also risk down-votes as people rarely come back to see your revisions. Looks good now though. – Sparky Oct 12 '14 at 21:47
Alright, sorry for that, will remember that in the future :) – NZ Mikey Oct 12 '14 at 21:49

score 1 · Answer 2 · answered Oct 12 '14 at 21:59

Ok, after googling a bit I found this solution. It's similar to that what @NZ Mikey said:

Add following CSS...

.fancybox-wrap {
    pointer-events: auto;
}

The problem is a known one and can be found here:

Unable to Close Fancybox iFrame

2 Answers2