Menu
I just migrate Foundation 4 to Foundation 5.
I have a problem with reveal modal in foundation 5 (it worked in foundation 4 !) when I open a reveal modal using a jquery script : The reveal modal appears but can't be closed (neither by clicking on the X, nor by clicking on the background) Here's my code :
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<!-- The button -->
<p><a href="#" class="add2cart button">Reveal Modal</a></p>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script>$(document).foundation()</script>
<script type="text/javascript">
$(document).on("click",".add2cart",function(){
//Create the reveal modal in DOM
$('body').append('<div id="added2cart" class="reveal-modal small" data-reveal><p>My reveal-modal appears but can\'t be closed !</p><a class="close-reveal-modal">×</a></div>');
//Open the reveal modal
$('#added2cart').foundation('reveal', 'open');
});
</script>
</body>
</html>`
Any idea why ?
Thanks in advance !
845
It seems that ". close-reveal-modal" link, must be present in the DOM, when the $(document).foundation() is executed. http://foundation.zurb.com/forum/posts/483-foundation-5-reveal-modal-cant-be-closed
I've changed my layout and it works.
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
