Menu icon Foundation
Problem with reveal modal in safari

I'm using Foundation 5 and am encountering a strange issue when using more than one reveal on a single web page. Both reveal modals work fine in all browsers except Safari. Now here's the kicker, it works in Safari when I open the webpage file that it stored on the computer, but when I open the page from the url from the server, the second reveal doesn't show. The screen dims, but no reveal. The first reveal works just fine, but the second is only not showing up in Safari. Cannot understand what is going on here. I hope this makes sense, it's kinda hard to explain. Help please : (

<a href="#" data-reveal-id="log-in" data-reveal>Log In</a>

<div id="log-in" class="reveal-modal small" data-reveal>




<a href="#" data-reveal-id="advertise" data-reveal>Advertise</a>

<div id="advertise" class="reveal-modal small" data-reveal>
            

         

revealmodal

I'm using Foundation 5 and am encountering a strange issue when using more than one reveal on a single web page. Both reveal modals work fine in all browsers except Safari. Now here's the kicker, it works in Safari when I open the webpage file that it stored on the computer, but when I open the page from the url from the server, the second reveal doesn't show. The screen dims, but no reveal. The first reveal works just fine, but the second is only not showing up in Safari. Cannot understand what is going on here. I hope this makes sense, it's kinda hard to explain. Help please : (

<a href="#" data-reveal-id="log-in" data-reveal>Log In</a>

<div id="log-in" class="reveal-modal small" data-reveal>




<a href="#" data-reveal-id="advertise" data-reveal>Advertise</a>

<div id="advertise" class="reveal-modal small" data-reveal>
            

         
Rafi Benkual over 5 years ago

I created a codepen demo http://cdpn.io/qLpHI. It works in Safari on this test.

Not sure what the difference between there and the server is. Anyone else have an idea?

Dontae Brodie over 5 years ago

Thanks for making the demo. So I've tried it and the "log in" modal drops down, but when I click on the "advertise" link, the screen dims but no modal shows up on my computer still. Do you think it's just an issue with my computer/browser/server?

Haiden Taylor over 4 years ago

Dontae,

I had the same issue in 5.5.1 and only in Safari desktop.

It appears I was able to resolve the issue by setting the root element to an empty string in the settings (the default is body).

   $(document).foundation({
    reveal : {
      animation : 'fade',
      root_element : '',
    }
  });

I'm not sure why or how this fixes the issue, as giving the root_element setting a length of 0 only seems to result in reveal.js wrapping the modal in a placeholder div. See: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.reveal.js#L288-297

Anyway, I hope this resolves your issue.