Menu icon Foundation
Foundation 5 Reveal Modal - close_on_background_click not working on mobile

Can someone please help me? I'm using Foundation 5.0.3 (I think, can't remember when I downloaded it and can't see where to check in the code for version numbers?)

On my site tried to use reveal modal but it's not working. I've googled and read all the posts on here but none address my issue - when viewing on a mobile (iPhone/iPad) tapping the background will not close the modal, only the a class="close-reveal-modal" will close the modal. It works fine on a desktop tho.

I've tried everything to solve this but cannot figure it out. I'm using standard unmodified foundation.css and foundation.min.js. I've even stripped this back to basics ( see attached code) and it still doesn't work!!

Any ideas???

<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="css/foundation.css" type="text/css" media="all" />
<script src="js/modernizr.js"></script>
</head>

<body>
<section class="content">
    <div class="row">

		<div class="small-12 medium-4 large-4 columns">
			<a href="#" data-reveal-id="test" data-reveal><img src="http://placehold.it/400x300&amp;text=[click Me]"></a>
		</div>

		<div id="test" class="reveal-modal" data-reveal>
			<img src="http://placehold.it/400x300&amp;text=[here I am]">
			<a class="close-reveal-modal">&#215;</a>
		</div>

	
	</div><!-- content row -->
</section><!-- content -->  


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

</body>
</html>
            

         

revealmodalFoundation 5

Can someone please help me? I'm using Foundation 5.0.3 (I think, can't remember when I downloaded it and can't see where to check in the code for version numbers?)

On my site tried to use reveal modal but it's not working. I've googled and read all the posts on here but none address my issue - when viewing on a mobile (iPhone/iPad) tapping the background will not close the modal, only the a class="close-reveal-modal" will close the modal. It works fine on a desktop tho.

I've tried everything to solve this but cannot figure it out. I'm using standard unmodified foundation.css and foundation.min.js. I've even stripped this back to basics ( see attached code) and it still doesn't work!!

Any ideas???

<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="css/foundation.css" type="text/css" media="all" />
<script src="js/modernizr.js"></script>
</head>

<body>
<section class="content">
    <div class="row">

		<div class="small-12 medium-4 large-4 columns">
			<a href="#" data-reveal-id="test" data-reveal><img src="http://placehold.it/400x300&amp;text=[click Me]"></a>
		</div>

		<div id="test" class="reveal-modal" data-reveal>
			<img src="http://placehold.it/400x300&amp;text=[here I am]">
			<a class="close-reveal-modal">&#215;</a>
		</div>

	
	</div><!-- content row -->
</section><!-- content -->  


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

</body>
</html>
            

         
Rafi Benkual over 5 years ago

We opened an issue on GitHub for this. Thanks! https://github.com/zurb/foundation/issues/4478

Osh Roberts over 5 years ago

Thanks for the reply Rafi.

I've looked at the link on GitHub, and that doesn't work for me either. I've used my iPhone 5, my wife's iPhone 5, our iPad 2 to look at it and the touch issue still exists.

Am I doing something wrong?

The example modal on http://foundation.zurb.com/docs/components/reveal.html works fine on my phone but I just can't figure out what the difference is... Any other ideas? Your help is much appreciated with this!