Menu icon Foundation
Reveal not closing

I can see this has been mentioned before, but really can't figure out why my reveal modal won't close (either by clicking "close-reveal-modal" or clicking in background or pressing escape.

The code below is exactly how it is, although the scripts are being called in via a php include, but I have tested this is not the issue by calling directly and the same issue occurs.

Any ideas??
Thanks

<a href="#" class="reveal-link" data-reveal-id="mapModal" data-reveal>View Map</a>   

<div class="reveal-modal" id="mapModal">
  <img src="http://placehold.it/800x600" />
  <a class="close-reveal-modal">&#215;</a>
</div>

<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script type="text/javascript"> 
    $(document).foundation();
</script> 
         

revealmodalclose-reveal-modal

I can see this has been mentioned before, but really can't figure out why my reveal modal won't close (either by clicking "close-reveal-modal" or clicking in background or pressing escape.

The code below is exactly how it is, although the scripts are being called in via a php include, but I have tested this is not the issue by calling directly and the same issue occurs.

Any ideas??
Thanks

<a href="#" class="reveal-link" data-reveal-id="mapModal" data-reveal>View Map</a>   

<div class="reveal-modal" id="mapModal">
  <img src="http://placehold.it/800x600" />
  <a class="close-reveal-modal">&#215;</a>
</div>

<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script type="text/javascript"> 
    $(document).foundation();
</script> 
         
Damian Smith over 5 years ago

Just noticed this in the console:

Uncaught TypeError: Cannot read property 'bg_class' of undefined
(anonymous function)
jQuery.event.dispatch
elemData.handle

Damian Smith over 5 years ago

Ok I have fixed it. The modal needs to be above the reveal modal link for some reason.

 <div id="myModal" class="reveal-modal" data-reveal>
  <img src="http://placehold.it/800x600" />
  <a class="close-reveal-modal">&#215;</a>
</div>   

<a href="#" data-reveal-id="myModal" data-reveal>View map</a>

<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script type="text/javascript"> 
    $(document).foundation();
</script> 

Rafi Benkual over 5 years ago

Thanks for posting the solution! The link is tied to the id of the modal itself.