Menu
I am using Foundation 5 for my web application. Now when I try to call a modal I am getting JS-error:
Uncaught TypeError: Cannot read property 'css' of undefined "**
in the console. I am not able to find any possible fix for this even in foundation blog/support.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, height=device-height">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/swiper.css">
<script src="js/modernizr.js"></script>
<title>Test code</title>
</head>
<body>
<a href="#" data-reveal-id="myModal" data-reveal>Click Me For A Modal</a>
<div id="firstModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
/*Fix for Sticky footer and List to Be displayed properly in Sidebar*/
$(function() {
var timer;
$(window).resize(function() {
clearTimeout(timer);
timer = setTimeout(function() {
$('.inner-wrap').css("min-height", $(window).height() + "px" );
}, 40);
}).resize();
});
</script>
<!-- Modal -->
</body>
</html>
275
The problem with this example is that your data-reveal-id="myModal" attribute doesn't match the reveal modal's id="firstModal" attribute. Once those match up you should no longer see this error.
Also, your anchor tag doesn't need the data-reveal attribute, only the modal itself needs that.
@BobbySales: Other things can cause this too... like if you mistype your data-reveal attribute. If the data-reveal attribute is missing or the data-reveal-id doesn't match the id of the modal then this will break. If you're opening your modal with javascript and you get this error, make sure you don't have a typo in your data-reveal attribute. Another thing that can cause this is if the $(document).foundation() call happens before the modal is displayed on the page.
Hope this helps.
93
You can also get this error if your target div is missing the data-reveal attribute.
27
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
